word-wrap:break-word与word-break:break-all的区别所在

最新推荐文章于 2023-10-26 15:00:46 发布

weixin_30332241

最新推荐文章于 2023-10-26 15:00:46 发布

阅读量87

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/adubky/archive/2013/05/17/word_wrap2766733967.html

本文详细对比了word-wrap:break-word;和word-break:break-all;在处理文字换行时的不同表现，特别针对中文与非中文文本的适应性，并提供了实例代码演示。同时，介绍了如何通过overflow属性解决溢出问题。

通常在网页排版中会遇到文字换行的问题，一些人常常用到word-wrap:break-word;或word-break:break-all;对二者有些混淆概念，今天博主就来讲讲2者间的一点小差别。

一、对于中文，使用其一都能满足：

word-wrap:break-word;方式：

文本自动换行文本自动换行文本自动换行文本自动换行文本自动换行文本自动换行

对应代码：
<div style="width:250px;border:1px solid #ccc;word-wrap:break-word;">文本自动换行文本自动换行文本自动换行文本自动换行文本自动换行文本自动换行</div>

word-break:break-all;方式：

文本自动换行文本自动换行文本自动换行文本自动换行文本自动换行文本自动换行

对应代码：

<div style="width:250px;border:1px solid #ccc;word-break:break-all;">文本自动换行文本自动换行文本自动换行文本自动换行文本自动换行文本自动换行</div>

二、非中文(例如：英文，阿拉伯数字)，此时，2者就有了变化，前者会显示完成的单词；而后者在换行时会把单词拆开： word-wrap:break-word;方式：

word-wrap:break-word;方式：

While our dream is confronted with the reality, you always feel painful. Just trample on the pain, or you’ll be beaten down by it.

对应代码： <div style="width:260px;border:1px solid #ccc;word-wrap:break-word;">

While our dream is confronted with the reality, you always feel painful. Just trample on the pain, or you’ll be beaten down by it. </div>

word-break:break-all;方式：

While our dream is confronted with the reality, you always feel painful. Just trample on the pain, or you’ll be beaten down by it.

对应代码： <div style="width:260px;border:1px solid #ccc;word-break:break-all;">

While our dream is confronted with the reality, you always feel painful. Just trample on the pain, or you’ll be beaten down by it. </div>

由此看来，我们在使用word-wrap:break-word;会比使用word-break:break-all;的效果更好一些。由于我给出的外框没有定高，如果定了高之后，框内的内容比较多的话就出超出框的边界，此时我们要加上overflow:hidden;属性，来隐藏多余的部分。完整写法：
word-wrap:break-word;overflow:hidden;

原文地址：http://blog.sina.com.cn/s/blog_a4e9028f0101fkt4.html

转载于:https://www.cnblogs.com/adubky/archive/2013/05/17/word_wrap2766733967.html