CSS3属性控制文本显示行数，溢出自动加省略号

显示全部楼层 · 2024-3-9 14:24:05

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

语法：
text-overflow:clip | ellipsis
默认值为clip 不显示省略标记
clip:当前对象内文本溢出时不显示省略标记,而是将溢出部分裁剪。
ellipsis:当对象内文本一处时显示省略标记(...)。

一、常见的单行文本溢出显示省略写法：

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; /*1*/
overflow: hidden; /*2*/
white-space: nowrap; /*3*/
word-break: break-all;
}
</style>
<body>
<p class="p">多行文本溢出显示多行文本溢出显示多行文本溢出显示</p>
</body>
</html>

复制代码

二、多行文本溢出

WebKit浏览器有一个-webkit-line-clamp的属性，用这个即可以实现webkit内核的浏览器、以及大部分移动端的多行文本溢出省略号；

display:-webkit-box;
-webkit-line-clamp: 3/*第几行裁剪*/
-webkit-box-orient:vertical;

<!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; /*1*/
-webkit-line-clamp: 2; /*2*//*第几行裁剪*/
-webkit-box-orient: vertical; /*3*/
}
</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>

复制代码

CSS3属性控制文本显示行数，溢出自动加省略号

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子