我这里有一个列表,列表下面写的是每个人说的内容,他们的内容不固定长度,一般能超过
3行,先在有个需求就是让他们溢出列表盒子外面的隐藏,然后在最后能看到的那句话后面加
上一个省略号,但是有一个问题,列表盒子里面,很多人有些字段长度是不固定的,会把下面那个
个人介绍的盒子挤压,导致有些个人介绍本来该露3行,结果只露出了两行半,请问这个需求该怎么解决,谢谢
有三种方法:
1.给这个div设置一个最大高度,然后给这个div设置oveflow:hidden,超出的直接不显示;
2.用js先判断字数,比如三行应该显示30个字,你就判断超过28字就进行截取,然后加上...一起显示;
3.overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
但是这个只能在webkit内核的浏览器中适用;
最后还要你自己看着权衡吧
赞同楼上第三种方式,简单粗暴,但好像并不是只有webkit支持吧,加入各厂商前缀,以及通用写法(不带厂商前缀),兼容性还是可以的
内容容器
max-height:(3*line-height)px;line-height:20px;position:relative;overflow:hidden