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

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

 

单行省略:(配合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;//合并空白符序列,保留换行符}

 


版权声明:本文为qq_46028949原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。