使用纯CSS实现文字超过一定的长度后自动显示省略号
在我不知道CSS具有这个功能之前，我都是通过在后台判断字符串的长度，然后通过取substr再通过字符串连接“...”形成想要的效果，但是，如果遇到英文的话，就会判断不准确了，用我自己的话讲叫做英文字符比较瘦。
偶然发现，CSS可以完成这样的事情，而且可以完成的非常棒：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
margin: 0px;
padding: 0px;
}
#div1 {
width: 300px;
height: 300px;
background: red;
}
.pText {
display: block;
height: 30px;
width: 250px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.aText {
width: 100px;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="div1">
<span class="pText">
<a class="aText">空白会被浏览器保留。其行为方式类似 HTML 中的标签。</a>
</span>
</div>
</body>
</html>不多做解释，各位对CSS属性有疑问的可以自行百度W3School。
效果如下
多行文本可以使用如下样式:
.intwoline {
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}其中3代表需要预留的行数，各位可自行设置。
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： 退出页面时清空全部或指定Session变量
- 下一篇： 移动端实现简单的下拉刷新【web前端】
