如何在CSS中将文本换行到新行

长文本在网页设计过程中似乎无法控制。但是它们也是不可避免的,有时它们最终会越过边界。这会创建一个松散的文档对象模型(DOM),并带有不必要的,不是用户友好的溢出。

但这是个好消息:您可以使用CSS将这么长的文本包装到新行中,从而处理这些文本。在这里,我们将向您展示如何使用CSS包装长而完整的文本。

CSS文字换行的工作方式

CSS使用内置的自动换行溢出自动换行属性来处理较长的单词。

但是,当不受控制时,浏览器默认情况下会处理此类长文本。在收到指示之前,他们不会包装长单词。

相关:您需要了解的有关DOM的知识

前面提到的两个主要CSS属性以相同的方式工作,您可以互换使用它们。但是,它们接受四个值或语法:

  • break-word :这是实际的CSS语法,它告诉浏览器将长文本换行到新行。
  • normal :它在DOM内的正常分离点处打破每个单词。它对长字符串没有影响。
  • initial :这是浏览器默认的字符串处理方式。像普通语法一样,它不会打断长单词。
  • Inherit :告诉子元素继承其父元素的属性。但是,它仍然不适用于长文本,除非您对父元素应用了断字

如何使用CSS换行符包装长词

使用CSS将单词包装到新行很容易,不需要繁琐的CSS调整即可工作。

例如,下面的示例图像中的文本容器内的长h2文本越过了边界线:

让我们看看如何使用word-wrap CSS属性将其包装到下一行:

HTML

 <div class="wrap-it">
This-div-contains-the-long-h2-lorem-text-demonstrated-in the image above
</div">

CSS

 .wrap-it{
word-wrap: break-word;
}

将长h2文本包装在示例图像中之后,输出如下:

而已!现在,您知道了如何使用CSS将单词包装到DOM中的新行上。

相关:如何使用CSS选择器定位网页的一部分

但是,如前所述,自动换行溢出自动换行以相同的方式工作并接受相似的属性。

要改用自动换行,只需将自动换行替换为自动换行即可

在网页上自动换行很重要

除了使网页更具美感外,自动换行文字还可以压缩DOM。即使您控制内容部分的内容,用户也可以张贴不适合您的文本容器或整个DOM的链接或其他词。

因此,将文本换行应用于这样的部分对于保持DOM完整是必要的。