text单行和多行显示控制

1.单行文本溢出显示省略号 （3个同时使用-2个加到父容器，1个加到text上）

overflow:hidden; //溢出隐藏   (father)

text-overflow:ellipsis;//超出显示省略号 (father)

white-space:nowrap;//强制文本在一行内显示 (text)

2.文本显示行数控制  （5个同时使用-2个加到父容器，3个加到text上）

overflow: hidden;(father)

text-overflow: ellipsis; // 超出显示'...' (fatehr)

display: -webkit-box; // 将元素作为弹性伸缩盒子模型显示 。(text)

-webkit-line-clamp: 2; // 用来限制在一个块元素显示的文本的行数  (text)

-webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式 (text)

3 overflow

4 text-overflow

5 white-space属性讲解   （空格处理）

有着几个可选值：默认为white-space:normal。

normal,  表示合并空格，多个相邻空格合并成一个空格   换行作为空格处理，只会根据容器的大小进行自动换行。

nowrap,  nowrap和normal一样，也合并空格，但是不会根据容器大小换行，表示不换行 效果如下

pre, 保持源码中的空格，有几个空格算几个空格显示，同时换行只认源码中的换行和<br/>标签

pre-wrap,保留空格，并且除了碰到源码中的换行和<br/>会换行外，还会自适应容器的边界进行换行

pre-line。合并空格，换行和white-space:pre-wrap一样，遇到源码中的换行和<br/>会换行，碰到容器的边界也会换行。