CSS属性探秘系列(一)：word-break与word-wrap

以下是关于CSS属性探秘系列(一)：word-break与word-wrap的详细攻略：

简介

word-break和word-wrap都是CSS中用于处理文本换行的属性。它们的作用类似，但具体效果略有不同。

word-break属性

word-break控制单词在一行中的换行行为。默认情况下，单词会在边界处自动截断并换行。可以使用word-break属性来控制单词的断行方式。

属性值

• normal：默认值。单词会在边界处自动截断并换行
• break-all：强制单词在任意字符间断行，即使该单词内部有字母和数字
• keep-all：保留整个单词，并防止在单词内部换行。如果单词太长，它会向右延伸超出容器边界
• break-word：强制单词在间隔处断行，所有单词自动内断，不管是否有连字符，对于连字符长单词来说，连接符会被忽略

示例说明

1、使用break-all断行

<div style="width: 100px; word-break: break-all;">Thisisaverylongwordthatshouldbreak</div>

上述代码中，设置了一个宽度为100像素的div容器，把一个单词“Thisisaverylongwordthatshouldbreak”放在容器中，可以看到，单词被强制在任意字符间断行。

2、使用keep-all保持整个单词

<div style="width: 100px; word-break: keep-all;">Thisisaverylongwordthatshouldbreak</div>

上述代码中，同样是一个宽度为100像素的div容器，使用了keep-all属性，可以看到，单词被保留整个，不会在单词内部断行。

word-wrap属性

word-wrap与word-break的作用类似，不同之处在于它会在单词内部断行。而且，它还可以处理非常长的单词，使它们不会超出容器的边界。

属性值

• normal：默认值。单词会在边界处自动截断并换行
• break-word：强制单词在间隔处断行，所有单词自动内断，不管是否有连字符，对于连字符长单词来说，连接符会被忽略

示例说明

1、使用普通方式换行

<div style="width: 100px;">Thisisaverylongwordthatshouldbreakstatement</div>

上述代码中，还是一个宽度为100像素的div容器，把一个单词“Thisisaverylongwordthatshouldbreakstatement”放在容器中，可以看到，单词被截断成了两行。

2、使用break-word断行长单词

<div style="width: 100px; word-wrap: break-word;">Thisisaverylongwordthatshouldbreakstatement</div>

上述代码与上一个示例类似，不同之处在于使用了break-word属性，在长单词间隔处断行。可以看到，单词被断成了多行，不会超出容器的边界。

综上所述，word-break和word-wrap两个属性可以帮助我们更好地控制文本的换行和行为，可以根据具体需求来选择使用哪一个。