button文字超长换行_网页里的超长文字超出边界？不用慌，超哪断哪

文字是网页展示内容的重要载体，最常见的文字有中文和英文。但浏览器处理同时含有中文和英文的句子时，会发现换行处理是不尽人意，要么长单词超出容器，要么单词断的太快，造成阅读的障碍。所以处理文字换行很有必要掌握！

语法

word-break:value(为以下取值)；

Normal，默认值，根据浏览器默认规则来拆分换行，每种浏览器可能都会有不同效果

keep-all，凡是长单词，都不拆行，或者半角空格或连字符处才换行，简单点理解，就是长单词保持原样，有标点符号才换行，所以很容易造成溢出容器或者容器内有缺块。

break-all，所有单词碰到边界一律拆分换行，这也是常用处理中英文字段的手法，可以让容器内文字排列整齐。

break-word，最理想的处理手法，长单词只有超出才拆分换行，其他保持不变。可以说是keep-all和break-all的结合体。

案例

当word-break:keep-all，所有“单词”一律不拆分换行，极有可能会溢出容器，并且空格、标点符号也会触发换行。

超长单词超出容器

当word-break:break-all，所有单词碰到边界一律拆分换行，就会造成英文单词断开。这也是目前国内常用的处理方法。

超长单词被拆分换行

当word-break:break-word，长单词只有超出才拆分换行，其他保持不变。这种是上两种结合体，是最完美解决超长文字换行方案，单单记这个就足够了！

超长单词先换行，发现仍然不够，就断行

总结

总结