HTML多行文本溢出显示省略号
一、text-overflow属性
text-overflow具有三个值。
一个是clip,修剪文本。
第二个就是今天的主角ellipsis,显示省略符号来代表被修剪的文本。
第三个是string,使用给定的字符串来代表被修剪的文本,不过一般都不使用这个值。
clip的值
white-space:nowrap;
width:200px;
overflow:hidden;
text-overflow:clip;
表现出来的形式大概就是这种,它也得用white-space:nowrap 和overflow:hidden两个才能表现出裁剪的效果。
二、单行文本溢出显示省略号
单行文本溢出显示省略号也是一个连招,比较简单
width:200px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
表现出来的效果是这样式的
三、多行文本溢出控制最后一行显示省略号样式
接下来重点来啦,利用display: -webkit-box,将对象作为弹性伸缩盒子模型显示,-webkit-line-clamp限制第几行显示省略号,-webkit-box-orient: vertical设置或检索伸缩盒对象的子元素的排列方式就可以完成这样的效果啦
<body>
<div class="test">这是一个很长很长很长很长很长很长很长很长很长很长很长很长的文本</div>
</body>
<style>
.test{
width:100px;
overflow : hidden; /*必须结合的属性,当内容溢出元素框时发生的事情*/
text-overflow: ellipsis; /*可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。*/
display: -webkit-box; /*必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。*/
-webkit-line-clamp: 2; /*用来限制在一个块元素显示的文本的行数。*/
-webkit-box-orient: vertical; /*必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。*/
}
</style>