如何在 CSS 中使用换行符?

cssweb developmentfront end technology更新于 2025/2/23 9:16:17

通常，在使用普通 HTML 时，我们习惯使用 HTML 中的 <br> 标签为任何长文本指定换行符，以便在任何单词之后的任意位置断行。该标签在这种情况下效果很好，但我们也可以使用 CSS 来实现同样的效果，这是一种更方便且更有利于 SEO 的网页组织方式。

CSS 为我们提供了许多属性，无需使用 <br> 标签即可在网页上的长文本中任意位置断行。用于断行的 CSS 属性如下:

仅使用 line-break 属性
同时使用 overflow-wrap、word-wrap 和 word-break 属性。

现在，让我们结合代码示例，实际讨论并理解上述两种在网页上为特定文本断行的方法。

使用 line-break 属性

CSS 的 line-break 属性主要用于中文、日文和韩文的断词。在使用符号或标点符号时，断行会更加有用。 line-break 属性可以与许多不同的全局值以及关键字值一起使用。

line-break 属性可以使用的值如下表所示 -

全局值	关键字值
inherit	auto
initial	loose
revert	normal
revert-layer	strict
unset	anywhere

语法

以下语法将向您展示如何使用 CSS 的 line-break 属性在长文本中的单词后添加换行符 -

line-break: value; // 使用上表中的值

让我们借助代码示例来理解并实际实现它，看看它是如何改变网页上文本外观的。

步骤

步骤 1 - 在第一步中，我们将定义一个带有类名和一些长文本的 HTML 元素，并在其上应用 line-break 属性并查看变化。
步骤 2 - 在下一步中，我们将定义 <style>标签内，我们将使用其类来抓取元素，然后应用 CSS 的 line-break 属性。
步骤 3 − 在最后一步中，我们将使用第一步中指定的类来抓取元素，然后为其应用 line-break CSS 属性及其值。

示例

以下示例将解释当为 line-break 属性赋值为任意值时，该属性如何工作 −

<!DOCTYPE html>
<html >
<head>
   <style>
      .line-break{
         width: 500px;
         line-break: anywhere;
      }
   </style>
</head>
<body>
   <center>
      <h2> Uing line break in CSS </h2>
      <p> The below text will break line using the line-break property of CSS instead of using the break tag in HTML. </p>
      <p class = "line-break"> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.
      </p>
   </center> 
</body>
</html>

在上面的例子中，我们没有使用 <br> 标签来换行，而是使用了 CSS 的 line-break 属性，其值为 anywhere。anywhere 值会在文本的任意位置换行，就像断掉一个单词一样，这样可以保持文本对齐的层次结构。

注意 - 使用带有 any 值的 line-break 属性在处理英语时不是一个好习惯。在本例中，它仅用于解释 line-break 属性。

同时使用 overflow-wrap、word-wrap 和 word-break 属性

使用 CSS 属性换行的另一种方法是将三个 CSS 属性的值设置为与 break-word 相同的值。这些属性将根据元素的宽度进行换行。相同文本的换行方式会因应用属性的主元素宽度不同而有所差异。

语法

以下语法将向您展示如何使用所有三个 CSS 属性在不使用 break 标签的情况下换行 -

overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;

让我们借助代码示例实际实现这些 CSS 属性并换行。

步骤

此示例的步骤/算法与上例基本相似。您只需将 line-break 属性更改为语法中已知的三个具有相同值的属性，并为主要元素指定一个特定的值即可。

示例

以下示例将说明如何使用 overflow-wrap、word-wrap 和 word-break 属性实际使用 CSS 断行 -

<html>
<head>
   <style>
      .line-break{
         width: 500px;
         overflow-wrap: break-word;
         word-wrap: break-word;
         word-break: break-word;

      }
   </style>
</head>
<body>
   <center>
      <h2> Using line break in CSS </h2>
      <p> The below text will break line using the line-break property of CSS instead of using the break tag in HTML. </p>
      <p class = "line-break">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p>
   </center>
</body>
</html>

在本例中，我们结合使用了 CSS 的三个属性来根据主元素的特定宽度进行换行。这些属性只会在单词后换行，而不会通过换行来换行。

在本文中，我们学习了使用 CSS 换行的两种不同方法。我们通过实际操作并结合不同的代码示例，对这两种方法进行了讨论和理解。使用上述两种方法，您可以使用 CSS 换行，而无需使用 HTML 中的标签。