有些时候在文章列表的页面,文章标题只要显示固定宽度,那么我们就需要把多余的文字省略掉,这个时候就需要用省略号处理。
一、单行省略号设置
<style>
.text{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 150px;
border:1px solid #ccc;
padding:10px;
}
</style>
<div class="text">
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</div>
一、多行省略号设置
<style>
.text{
width: 200px;
border:1px solid #ccc;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; /* 设置最多显示几行 */
-webkit-box-orient: vertical;
}
</style>
<div class="text">
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</div>