[分享]css3文字断行

CSS3提供了强大的文本布局和排版功能，其中之一便是文字断行。

/* 代码示例1 */
p {
  width: 200px;
  word-wrap: break-word;
}

/* 代码示例2 */
p {
  width: 200px;
  overflow-wrap: break-word;
  word-break: break-word;
} 

在网页设计中，我们常常遇到一种情况，即一个长单词或URL超出了其容器的宽度，这时我们需要将其自动换行。CSS3可以通过word-wrap属性实现文字断行，这个属性可以设置两个值：

• normal（默认值），允许单词在任意位置断行。
• break-word，允许将长单词和URL强行断行。

但是，有时候在窄容器中不得不折断单词，这会导致阅读时的不适和理解上的困难。此时可以使用CSS3的overflow-wrap和word-break属性来解决。

overflow-wrap属性有两个值：

• normal（默认值），单词仅在空格或连字符处断开。
• break-word，允许单词在任意位置断行。

word-break属性同样有两个值：

• normal（默认值），按照默认的断字规则（通常是空格和连字符）断字。
• break-word，允许将单词在任意位置断行。

最后，我们可以将两个属性结合使用，以实现更加高效的文字断行效果。两个属性在一起使用时，只需将两者都设置为break-word即可。如下所示：

p {
  width: 200px;
  overflow-wrap: break-word;
  word-break: break-word;
} 

这样，在容器过窄的情况下，文字也能够更加清晰、美观的显示在页面上。