经常会出现一个盒子里放不下内容需要将多余部分显示省略号的需求，今天记录一下css实现的方式
//伪代码
<style>
p {
width:20px;
height:20px;
overflow: hidden;//多出部分隐藏
white-space: nowrap;//一行显示
text-overflow: ellipsis;//是否显示省略号
}
</style>
<body>
<div>
<p>好多内容好多内容好多内容好多内容好多内容好多内容好多内容好多内容好多内容好多内容好多内容好多内容</p>
</div>
</body>
- 如果是两行显示
<style>
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
</style>
- 可以试一试，最主要是后面的三句代码。如果使用js的话，可以先获取到里面的内容，然后使用字符串的截取方式（substr,substring,slice）等截取到需要的字符串后再加入到需要添加的标签里。
//伪代码
let pCon = $('p').text();
pCon = pCon > 4 ? pCon.substring(0,4) + '...':pCon;
$('p').html(pCon);
- 如果还想看更多字符串的方法，可以看：数组、字符串常用方法
扫一扫
8481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
