我们平时也会遇到这种情况吧,当一段文字很长,但是又不能全部显示时,就想只显示部分文字,然后剩下的用省略号代替。
单行文字截取
<div>sdhbsdhbfshdbhbhsdisidnisc</div>
div {
width: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
简简单单几行代码就可以实现了:
但要注意几点:
1、元素必须是块级元素,行内元素如a、span是没有效果的,如果想实现效果,要给他们加上display:block;
<a>shdfadshfbdisfonjsognsogjdc</a>
2、记得要定义块级元素的width
多行文字截取
<div>哈哈,今天是星期几啊哈哈,今天是星期几啊哈哈,今天是星期几啊</div>
div {
display: block;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2; /*定义的数字为显示的行数*/
-webkit-box-orient:vertical;
}