单行文本
<!DOCTYPE html>
<html lang="en">
<style>
.text {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<body>
<div class="text">单行文本显示省略号</div>
</body>
</html>
- 使用white-space属性设置不换行、overflow属性隐藏超出部分,text-overflow属性添加省略号。需注意必须有固定宽度才会出现效果。
-
white-space属性 用来设置如何处理元素中的空白。
-
overflow属性 定义当一个元素的内容太大而无法适应时，块级格式化上下文如何处理。它是 overflow-x 和 overflow-y的简写属性 。
-
text-overflow属性 确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号（'...'）或显示一个自定义字符串。
多行文本显示省略号
<!DOCTYPE html>
<html lang="en">
<style>
.text {
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
<body>
<div class="text">单行文本显示省略号多行文本显示省略号行文本显示省略号</div>
</body>
</html>
- 多行文本主要是把white-space属性修改为使用-webkit-line-clamp，限制在一个块元素显示的文本的行数来实现的。
- display: -webkit-box 设置div为弹性伸缩盒子模型。
-
-webkit-line-clamp 可以把块容器中的内容限制为指定的行数。它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient属性设置成 vertical 时才有效果。
-
-webkit-box-orient 用来设置一个元素是水平还是垂直布局其内容。该特性是非标准的，使用时需要注意兼容性。