这两个东西是什么，我相信至今还有很多人搞不清，只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句，又或者是因为这两个东西实在是太拗口了，长得又差不多，导致连背都很难背下来。 那它们到底是什么呢？我在mozilla的官网上 ...

这两个东西是什么，我相信至今还有很多人搞不清，只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句，又或者是因为这两个东西实在是太拗口了，长得又差不多，导致连背都很难背下来。 那它们到底是什么呢？我在mozilla的官网上 ...

两种方法的区别说明： 1，word-break:break-all 例如div宽400px，它的内容就会到400px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一 ...

这个问题的开始于我对中文和英文之前区别的一个疏忽（中文是一个字就是一个单词，而英文字母要有一个空格才将他们分割为一个单词）； 我们看到有三段文字，本意是将他们划分为三个块，并列排列，结果是这样的： 文字部分没问题，可是英文字母的部分把盒子模型撑的不像样，原因其实很简单 ...

word-break属性：指定非CJK脚本的断行规则。 值 描述 normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all ...

做项目改bug的时候，遇到过好多次，要么是文本超出文本区域，或者单词太长(一般是url链接中的一些鬼)，把装它的标签强制撑大，导致一些响应式问题。除此之外，还有很多问题，每次都是恍然醒悟，然后又在网上 ...

。 相关： word-break同word-wrap区别 ...

一、word-wrap：同意对长的不可切割的单词进行切割并换行到下一行。(中英文处理效果一样) word-wrap有两个取值： 1、word-wrap: normal：仅仅在同意的断字点换行（浏览器保持默认处理）。 2、word-wrap ...