嘗試在使用sass/css的第二行之後添加省略號？

在jsfiddle鏈接中，您可以找到我所嘗試的內容，但是當文本翻兩行時，我再也看不到省略號了。有人可以幫我嗎？我是新來的CSS，以及如何使用CSS/SASS解決這個問題。嘗試在使用sass/css的第二行之後添加省略號？

.exciting-text { 
 
    display: block; 
 
    text-overflow: ellipsis; 
 
    word-wrap: break-word; 
 
    overflow: hidden; 
 
    max-height: 2em; 
 
    line-height: 1em; 
 
} 
 
.exciting-text::after { 
 
    content: "..."; 
 
    color: red; 
 
}

<p class="exciting-text">Contributing to MDN is easy and fun.Just hit the edit button to add new live samples, or improve existing samplesdfsfssfddcdxcxdsdzxfsfdsadasdaddsadsadsadsadsadasdasfds.</p>

來源

2017-01-19 JAY NATHAN

'text-overflow'只適用於單行**。 – connexo

對不起，我應該做到這個問題：http://stackoverflow.com/questions/6572330/is-it-possible-to-use-text-overflowellipsis-on-multiline-text但如果你真的把一點努力和谷歌搜索這個，你會碰到這個代碼筆：http://codepen.io/martinwolf/pen/qlFdp – Pete

@pete，這個例子使用webkit，我試圖避免不惜一切代價，是否有沒有使用webkit的方式，並感謝鏈接 –

在當前的例子中你的問題是max-height。擺脫它，您的僞省略將始終可見。

來源

2017-01-19 14:14:57

嘿感謝您的答案，但是我想限制文本爲兩行 –

嘗試在使用sass/css的第二行之後添加省略號？

回答

相關問題