换行和省略号

参考https://segmentfault.com/a/1190000000471925

 

1.学下英语

word wrap意思是自动折行

pre是preserve的缩写,意思是保留

 

2.认识下默认的情况

默认情况:

1. 对于空格,多个空格会合并成一个空格
2. 对于回车,忽略
3. 对于长于一行的句子,在空格处自动换行
4. 对于长于一行的单词,不换行(可能会产生滚动条)

 

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,打断单词,就是允许单词显示到下一行

 

写了个demo

5.省略号

参考http://www.w3cplus.com/content/css3-text-overflow

 

text-overflow:ellipsis

单行显示省略号,请注意是单行,如果是多行的话,不用这个.

保证单行:white-space:nowrap

溢出部分隐藏:overflow:hidden

显示省略号:text-overflow:ellipsis

块级元素不写宽度默认是超过一行显示省略号,写宽度的话超过宽度显示省略号

行内元素此属性无效,因为没有宽度的概念,也就不存在溢出的概念

行内块必须写宽度

demo