在日常开发中,经常会遇到一些省略文本的需求,比如“文本在一行显示,超出部分在结尾用省略号显示”、“最多显示三行,超出部分在第三行末尾用省略号显示”。
这些需求用纯CSS即可实现。
代码如下:
<style type="text/css">
body {
color: #AFAFAF;
background-color: black;
}
.border-dividor {
border: 1px solid #AFAFAF;
}
.one-line {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
}
.mutiple-line-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
</style>
<p class="border-dividor one-line">层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
<p class="border-dividor mutiple-line-ellipsis">层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
.one-line 定义了单行省略样式,样式含义:
.mutiple-line-ellipsis 定义了多行省略样式,样式含义:
-webkit-box 布局对老旧浏览器和 IE 浏览器的兼容不是很好,具体兼容性可在 caniuse.com 上查询。