参考https://segmentfault.com/a/1190000000471925
1.学下英语
word wrap意思是自动折行
pre是preserve的缩写,意思是保留
2.认识下默认的情况
默认情况:
- 对于空格,多个空格会合并成一个空格
- 对于回车,忽略
- 对于长于一行的句子,在空格处自动换行
- 对于长于一行的单词,不换行(可能会产生滚动条)
3.white-space
white-space是作用于空格和回车上的，用于控制：(只作用默认情况的前三条)
- 空格是否合并
- 回车是否解释成折行
- 句子太长是否在有空格处折行
normal | nowrap | pre | pre-wrap | pre-line
normal:字面意思是正常,恩,默认的情况
nowrap:字面的意思没有自动换行,恩,默认情况的第三条,改成不会自动换行
pre:字面意思保留(你写的所有),恩,无视默认情况,你写成什么样就什么样
pre-wrap:字面意思保留(默认情况的)自动换行,恩,你写成什么样就什么样,不过保留默认情况的第三条
pre-line:字面意思保留(默认情况的,空格渲染一致了就对齐了吧,我yy的)行,恩,你写成什么样就什么样,不过保留默认情况的第一条
4.word-wrap
word-wrap是作用在单词上，用于控制超长单词是否折行:(作用默认情况的第四条)
normal | break-word
word-wrap:break-word,打断单词,就是允许单词显示到下一行
5.省略号
参考http://www.w3cplus.com/content/css3-text-overflow
text-overflow:ellipsis
单行显示省略号,请注意是单行,如果是多行的话,不用这个.
保证单行:white-space:nowrap
溢出部分隐藏:overflow:hidden
显示省略号:text-overflow:ellipsis
块级元素不写宽度默认是超过一行显示省略号,写宽度的话超过宽度显示省略号
行内元素此属性无效,因为没有宽度的概念,也就不存在溢出的概念
行内块必须写宽度