关于单行、多行文字超出显示省略号
2022-01-11 本文已影响0人
Petricor
WebKit浏览器或移动端的页面
在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。
- 常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。
- DEMO解释:
em{
width:200px;——宽度必须加
overflow: hidden;——溢出隐藏
text-overflow: ellipsis;——可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本
white-space: nowrap;——不换行
display: block;
}
p{
width:200px;——宽度必须加
overflow : hidden;——将多余的隐藏
text-overflow: ellipsis;——可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本
display: -webkit-box;——必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-line-clamp: 2;——显示的行数
-webkit-box-orient: vertical;——必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
word-break:break-all;——如果一行中带有数字、英文、文字须加此行,起到强制换行的作用
}
具体看如下DEMO： -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单行，多行文本溢出显示省略号</title>
<style>
em{
width:200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
p{
width:200px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break:break-all;
}
</style>
</head>
<body>
<!-- 单行文本溢出显示省略号 -->
<em>多行文本溢出显示省略号多行文本溢出显示省略号多行文本溢出显示省略号多行文本溢出显示省略号多行文本溢出显示省略号多行文本溢出显示省略号多行文本溢出显示省略号</em>
<em>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</em>
<!-- 多行文本溢出显示省略号 -->
<p>多行文本溢出显示省略号多行文本溢出显示省略号多行文本溢出显示省略号多行文本溢出显示省略号多行文本溢出显示省略号多行文本溢出显示省略号多行文本溢出显示省略号</p>
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
</body>
</html>
