对word-wrap和word-break的理解

Posted 2022-09-25 webkb

首先，对中文无效，对英文有效，原因是中英文处理不一样（更新：word-break:keep-all允许中文不换行，word-break:break-word;和word-wrap:break-word一样）。

对中文来说，当最后的空间容不下一个字符的时候，换到下一行，若下一行也容不下一个字符，也仍只能如此，连一个中文字符都容不下，只能是设计问题。

对英文来说，也容不下一个单词的时候，也只能换行，如果下一行也容不下这个”单词“的时候，你说要不要让他溢出？比如特别长的字符串。

第一、默认先换行，默认允许字符串溢出显示。

第二、默认先换行，允许将字符串溢出的部分换行。word-wrap:break-word;

第三、不换行，将字符串溢出的部分换行。word-break:break-all;

这三种方法均有优缺点，视情况一般选择第二和第三方式显示，第二适合传统正常英文文章，第三适合，不是传统意义上的单词，而是如url，md5这样的长字符串。

这两个属性均由微软在IE5.5中引入，其他浏览器也支持。在新的CSS3草案中，word-wrap正式名称改为overflow-wrap，原名作为别名仍可使用。

不过我觉得，既然要改的话，我觉得也可也这样改overflow-word: one-line | multiple-line | free-line;

word-break:break-all;可以单独使用，与前一句连用效果是一样的。

值得注意的是，在table td中word-wrap:break-word;无效，word-break:break-all;有效。