CSS包装线和换行

在本文中，我们将介绍如何在CSS中实现单词包装和换行，并且不仅仅是在空格和连字符上，还包括下划线。

阅读更多：CSS 教程

CSS文本包装和换行

CSS提供了一些属性来控制文本的包装和换行方式。其中最常用的属性是word-wrap和white-space。

word-wrap属性用于指定是否允许单词在换行时跨行显示。默认情况下，CSS不允许单词在中间换行，而是将整个单词移到下一行。但是，当一行不足以容纳整个单词时，word-wrap属性可以让单词跨行显示。

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

上面的代码将应用word-wrap属性，并将其值设置为break-word。这将允许单词在行尾被截断，并在下一行继续显示。

white-space属性用于控制如何处理元素中的空格和换行符。常用的取值有normal、nowrap和pre-wrap。

.white-space-example {
  white-space: pre-wrap;
}

上述代码将应用white-space属性，并将其值设置为pre-wrap。这将保留连续的空格和换行符，并且让文本自动换行。

除了空格和连字符外，有时我们希望在下划线处实现单词的包装和换行效果。尽管CSS默认不会在下划线处进行文本包装，但我们可以使用一些技巧来实现这个效果。

.underscore-example {
  word-break: break-all;
  word-wrap: break-word;
}

上面的代码将同时应用word-break和word-wrap属性，以实现在下划线处进行文本包装和换行。word-break属性指定单词如何在元素内断行，而word-wrap属性允许单词在下划线处换行。

下面的例子将演示如何在CSS中实现对包含下划线的单词进行包装和换行：

<div class="underscore-example">This_is_a_long_word_with_underscores</div>

.underscore-example {
  word-break: break-all;
  word-wrap: break-word;
}

在上述示例中，使用div元素包含一个长单词，该单词包含下划线。通过应用.underscore-example类，我们可以实现在下划线处进行单词包装和换行。

通过使用CSS的word-wrap和white-space属性，可以实现对文本的包装和换行控制。通过使用word-break属性，还可以实现在下划线处对单词进行包装和换行。这些属性具有灵活性，可以根据具体需求来调整文本的显示方式。