如题,宽度固定,超过字数用...代替
display: -webkit-box;
box-orient: vertical;
line-clamp: 3; // 可控制几行后有 ...
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 兼容写法
overflow: hidden;
white-space:normal;
首先第一点,需要给那一行一个固定的宽度,即使不给固定宽度,也需要通过margin来限制这行,说白了,就是让这行有个固定的宽度。。。
其他的代码如下
如果是一个p标签
p{
width:100px;//固定宽度
overflow:hidden;//超出隐藏
white-space:nowrap;//不换行
text-overflow:ellipsis;//省略号
}
// line-clamp、line-height和height直接控制多行
.two-line {
color: #333;
line-height: 18px;
height: 36px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
display: -moz-box;
-webkit-line-clamp: 2;
-moz-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
8 回答4.7k 阅读✓ 已解决
6 回答3.4k 阅读✓ 已解决
5 回答2.8k 阅读✓ 已解决
5 回答6.3k 阅读✓ 已解决
4 回答2.2k 阅读✓ 已解决
4 回答2.8k 阅读✓ 已解决
3 回答2.4k 阅读✓ 已解决
传送门,去看看