[分享]css3文字自动换行

CSS3的文字自动换行功能允许我们在一定的宽度范围内，将文字按照一定的规则自动换行。这个功能在响应式设计中非常实用，也是一个制作网页布局的重要技巧。/ 换行 / wordwrap: breakword...

CSS3的文字自动换行功能允许我们在一定的宽度范围内，将文字按照一定的规则自动换行。这个功能在响应式设计中非常实用，也是一个制作网页布局的重要技巧。

/* 换行 */
word-wrap: break-word;

/* 中断单词换行 */
overflow-wrap: break-word;

两个属性都是用来控制自动换行的，但是它们的使用场景有所不同。

word-wrap属性表示是否允许单词在换行时被打断，它有两个值：“normal”表示创建自己的断点，而“break-word”表示在单词内创建换行。

例如，当设置一个长单词时，使用“normal”时，它可能会沿着左侧栏延伸，直到足以容纳整个单词，而使用“break-word”时，它会在需要时在单词内创建换行点。

overflow-wrap属性也表示是否允许单词在换行时被打断，但它是在有一定宽度限制的情况下使用的。当一行文本超过其容器的宽度时，此属性允许在单词内进行自动换行。

这个属性会尽可能的保持单词的完整性，但是如果单词连续的字符超出了父级元素的宽度，则依旧会进行换行。

总的来说，这两个css3属性都是用来控制自动换行的，区别在于word-wrap是在容器内部，而overflow-wrap是单词内部。根据需要选择合适的属性应用，可以很好的放置文字在网页中换行摆放的问题。