文本的单行省略和多行省略

在写样式的时候经常遇到单行省略或者多行省略的情况，有时候记得不全，还得去百度，特此写一遍，加强记忆。

 

单行省略：（配合width属性设置，完成超出部分省略显示）

overflow:hidden; //设置了这个属性，text-overflow属性才会生效

text-overflow:ellipsis;//超出范围的文本内容用省略号显示。

white-space:nowrap;//禁止换行  

 

多行省略：

overflow:hidden;//同上

text-overflow:ellipsis;//同上

display:-webkit-box;//对象作为弹性盒子模型显示；

-webkit-line-clamp:2;//来限制一个块元素显示文本的行数；

-webkit-box-orient:vertical;//必须结合的属性，设置或者检索伸缩盒对象的子元素的排列方式。

 

显示省略的内容（通过hover事件，显示隐藏的内容）

 

一、div：hover{width:auto;}

二、div:hover{

       text-overflow:inherit;

       overflow:visible;

      white-space:pre-line;//合并空白符序列，保留换行符}