我在使用省略号将文本放在两行时遇到问题。我能够让我的省略号工作但修改line-height并且height不做任何改变显示的文本行数。关于为什么我无法更改行数的任何帮助都会很棒。
试试这个
CSS
.slick-slide {
border-radius: 7px;
height: 200px;
margin: 0 10px;
overflow: hidden;
position: relative;
width: 200px;
img {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
.info {
background: rgba(black, 0.5);
border: 1.5px solid white;
border-radius: 7px;
bottom: 10px;
color: white;
left: 0;
margin: 0 10px;
padding: 7px 10px;
position: absolute;
text-align: center;
right: 0;
z-index: 1;
h6 {
display: -webkit-box;
margin: 0 auto;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
您需要做的就是将-webkit-line-clamp值调整为您希望可见的行数。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句