一、基础用法
单行:
<!--单行-->
<p class="pl">这个属性定义溢出元素内容区的内容会如何处理。如果值为 hidden,当点击hidden时,滚动机制关闭,</p>
CSS:
/*单行文本的溢出显示省略号*/
.pl{
width: 200px;
overflow:hidden;
text-overflow:ellipsis;
background: goldenrod;
white-space: nowrap;/*加宽度width属来兼容部分浏览*/
}
多行:
<div id="p2">
这个属性定义溢出元素内容区的内容会如何处理。如果值为 hidden,当点击hidden时,滚动机制关闭,内容会被修剪,但是浏览器不会显示供查看内容的滚动条,默认值是 visible。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
</div>
CSS:
/*多行文本溢出显示省略号*/
#p{
width:220px;
height:58px;
overflow:hidden;
text-overflow:ellipsis;
background: greenyellow;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;
/*-webkit-line-clamp是用来限制在一个块级元素内显示的文本行数,
为了实现这个效果,需要结合其他-webkit属性。
常见属性如下:
display:-webkit-box;必须结合的属性,将对象作为弹性盒子模型显示。
-webkit-box-orient:vertical;必须结合的属性,设置或检索伸缩盒子模型对象的子元素的排列方式。 */
}
进阶用法:
示例:在文本中间显示省略号
思路:将文本用div圈起来,用两个span标签分割成两块,在第一块内容中做超省,即可实现在文本中间实现超省。
代码:
<a href="" class="superBody">
<span class="superLine">
item.carName +
</span>
<span>
item.carVin
</span>
</a>
CSS:
{# 超出文本省略carName盒子 #}
.superBody {
width: 100%;
display: flex;
justify-content: center;
}
{# 超出文本省略 #}
.superLine {
overflow: hidden; /*超出的文本隐藏*/
text-overflow: ellipsis; /*溢出用省略号显示*/
white-space: nowrap; /*溢出不换行*/
text-align: end;
}
效果如下: