不能正确使用文本溢出:省略号

时间:2017-03-16 11:23:45

标签: html css

我希望文本“完成”高度长度,当它达到最大值时,它将使用省略号,但我无法弄明白。我只写了一行,我想要全长

<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>

enter image description here

更新

enter image description here

删除了空格:nowrap;但省略号仍然没有出现

1 个答案:

答案 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>