text-overflow:ellipsis;单行，多行文本溢出显示...

时间：2021-07-26 10:30:52 来源：网络编辑：本站点击：

常见的单行文本溢出显示省略号写法：text-overflow: ellipsis;overflow: hidden;white-space: nowrap;

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
.p{
width: 100px;
height: 40px;
line-height: 40px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>
<body>
<p class="p">多行文本溢出显示多行文本溢出显示多行文本溢出显示</p>
</body>
</html>

text-overflow: ellipsis;多行文本溢出就无法满足,so,
WebKit浏览器有一个-webkit-line-clamp的属性，用这个即可以实现webkit内核的浏览器、以及大部分移动端的多行文本溢出省略号；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
.p {
height: 60px;
line-height: 30px;
width: 80px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
<body>
<p class="p">多行文本溢出显示多行文本溢出显示多行文本溢出显示多行文本溢出显示多示</p>
</body>
</html>

如下：

其它浏览器的话就需要通过js实现：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
div{
height: 60px;
}
p {
line-height: 30px;
width: 80px;
margin: 0 auto;
}
</style>
<body>
<div id="div">
<p id="p">多行文本溢出显示多行文本溢出显示多行文本溢行文本溢示</p>
</div>
</body>
<script type="text/javascript">
var eleH = document.getElementById("div").clientHeight;

var pEle = document.getElementById("p");

while(pEle.clientHeight > eleH) {

pEle.innerText = pEle.innerText.replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "...");

};
</script>
</html>

版权声明：本文为CSDN博主「前端小狮」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文https://blog.csdn.net/m0_37885651/article/details/79896850

栏目导航

最新推荐

python内建函数大…	点击按钮(button)…
帝国cms网络视频引…

相关文章

栏目更新

栏目热门