如何在CSS中设置文本的换行方式（Word Wrap）？

在CSS中，我们可以使用word-wrap属性来设置文本的换行方式。该属性指定当单词太长而无法适应容器时，是否允许在单词内部断行。

语法

selector {
  word-wrap: normal|break-word|initial|inherit;
}

属性值

• normal：默认值，不允许在单词内部断行。
• break-word：允许在单词内部断行，以适应容器。
• initial：设置属性为默认值。
• inherit：继承父元素的属性值。

示例

假设我们有一个包含长单词的容器，并希望在单词内部进行换行。

<div class="container">
  <p class="text">ThisIsALongWordThatNeedsToBeWrapped</p>
</div>

我们可以使用word-wrap: break-word;来实现这一效果。

.container {
  width: 200px;
}

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

这样，当容器的宽度不足以容纳整个单词时，单词就会在内部进行换行。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： 如何使用CSS调整文本的首行缩进（First Line Indent）？
• 下一篇： 如何使用CSS调整文本的间距（Letter Spacing）？