不能使用文本溢出：正確的省略號

我想要文本「完成」高度的長度，當它達到最大值時，它將使用省略號，但我無法弄清楚。我有隻寫在一行，我想全長不能使用文本溢出：正確的省略號

<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

不能使用文本溢出：正確的省略號

回答

相關問題