因为专注,所以专业
2005 - 2020

用css控制文本字数防止溢出 超出部分显示省略号

时间:2020-06-29 23:14:26    作者:八叔模板堂

有时候需要控制下文字数,不然就会溢出,页面就会变样不美观。这时我们就可以用css控制字数,超出部分显示省略号。可以不换行,超出部分显示省略号,也可以可以换行,多行,超出部分显示省略号。

1.不换行,超出部分显示省略号

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>用css控制字数,超出部分显示省略号</title>
<style type="text/css">
*{margin:0;padding:0;}
body{width:1000px;margin:100px auto;}
.box{
width:260px;
/*超出部分就隐藏*/
overflow:hidden;
/*不换行设定*/
white-space:nowrap;
/*超出部分的文字显示省略号*/
text-overflow:ellipsis;
}
</style>
</head>
<body>
<div class="box">用css控制字数,超出部分显示省略号用css控制字数,超出部分显示省略号</div>
</body>
</html>

效果图如下:

不换行,超出部分显示省略号

2.可以换行,多行,超出部分显示省略号

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>可以换行,多行,超出部分显示省略号</title>
<style type="text/css">
*{margin:0;padding:0;}
body{width:1000px;margin:100px auto;}
.box{
width:260px;
display: -webkit-box;
-webkit-box-orient: vertical;
/*2行*/
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">1.用css控制字数,超出部分显示省略号用css控制字数,超出部分显示省略号</div>
<div class="box">2.用css控制字数,超出部分显示省略号用css控制字数,超出部分显示省略号</div>
</body>
</html>


效果图如下:

可以换行,多行,超出部分显示省略号

注:此方法适用于WebKit浏览器及移动端。 本文来源八叔模板堂 www.8sk.cn?整理发布 不允许转载


赞(0
免费拨打  111-1111-1111
免费拨打  111-1111-1111免费拨打 111-1111-1111
微信二维码
手机二维码
返回顶部
返回顶部返回顶部