关于文字内容溢出的处理
文字溢出一般会出现在表格,或者是banner、介绍页;对于这类,我们一般是用省略号去处理;再给个title属性;
注:主要是将省略号的情况,其它的暂不描述;
1.单行隐藏
单行隐藏是最常用的了,主要的css样式时:text-overflow:ellipsis;这类主要是用于块级元素中;但是,当我们给元素添加这个样式之后,没有生效,是因为我们缺少了另外两个样式:
overflow:hidden和white-space:nowrap;
<div style="width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">这是一个单行隐藏的测试,哈哈哈就是这样的了,很简单的</div> <!--white-space 不换行 overflow:hidden:溢出隐藏 text-overflow:ellipsis;省略号-->
如果是行内元素,请加上display:inlie-block/block 这个属性
但是,我们格(table)的时候就会发现,在ie11或者是ie8中样式失效了,解决的办法是添加table-layout:fixed;这个属性
<!-- 对于table类型来说,table-layout: fixed;这个很重要,必须要有--> <table style="table-layout: fixed;"> <tr> <td style="display: block;width: 100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"></td> </tr> </table>
2.多行注释
有些业务可能需要事项这样的,我要多行显示,
<!-- -webkit-line-clamp: 3;第几行裁剪 box-orient: vertical;排列方式;去掉white-space--> <div style="width: 100px;overflow: hidden;display: -webkit-box;line-clamp: 3; -webkit-line-clamp: 3;-moz-box-orient: vertical;-webkit-box-orient: vertical;"> 相见时难别亦难,东风无力百花残;凄凄惨惨戚戚,淋淋漓漓,日月经天,江河行地,春往秋来,花开花落 </div>