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

我想要文本“完成”高度的长度，当它达到最大值时，它将使用省略号，但我无法弄清楚。我有只写在一行，我想全长不能使用文本溢出：正确的省略号

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

UPDATE

删除了白色空间：nowrap;但省略号仍然没有出现

来源

2017-03-16 Bruno Moutinho

目前还不清楚你问什么，对不起。你的眼睛在“一条线”和“全长”之间有什么不同？ – arkascha

@arkascha我想要文字直到看到更多按钮 –

拿走你的'whitespace-nowrap' – zik

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>

来源

2017-03-16 11:36:23 Dhaarani

这不会导致应用省略号。 – arkascha

@arkascha现在检查它。 – Dhaarani

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

回答

相关问题