我希望文本“完成”高度长度,当它达到最大值时,它将使用省略号,但我无法弄明白。我只写了一行,我想要全长
<p class="download-text wow fadeInLeft" style="text-align:justify;height:100px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut faucibus, elit ut blandit lacinia, magna ligula varius mi, in ultrices risus elit ac sem. In finibus tincidunt ligula, ut semper ante feugiat vitae. Phasellus consequat rutrum nulla in rhoncus.
Fusce turpis magna, imperdiet ac massa eu, maximus porttitor ex. Nam vulputate ex id commodo pharetra. Nunc eget lectus ac nisi vestibulum congue. Donec eget diam nisl. Nulla massa est, efficitur eu enim at, imperdiet bibendum lorem. Duis iaculis felis
id ex mattis, eu iaculis elit ullamcorper. Mauris semper fermentum justo sodales convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<h6><button class="btn btn-default">See More</button></h6>
更新
删除了空格:nowrap;但省略号仍然没有出现
答案 0 :(得分:0)
p{
overflow: hidden;
text-overflow: ellipsis;
display: -moz-box !important;
line-height: 16px;
max-height: 3.6rem;
-moz-line-clamp: 3;
-moz-box-orient: vertical;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
<p class="download-text wow fadeInLeft">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut faucibus, elit ut blandit lacinia, magna ligula varius mi, in ultrices risus elit ac sem. In finibus tincidunt ligula, ut semper ante feugiat vitae. Phasellus consequat rutrum nulla in rhoncus. Fusce turpis magna, imperdiet ac massa eu, maximus porttitor ex. Nam vulputate ex id commodo pharetra. Nunc eget lectus ac nisi vestibulum congue. Donec eget diam nisl. Nulla massa est, efficitur eu enim at, imperdiet bibendum lorem. Duis iaculis felis id ex mattis, eu iaculis elit ullamcorper. Mauris semper fermentum justo sodales convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<button class="btn btn-default">See More</button>