如何處理固定高度容器中的文本溢出

Question

我只是在想，在固定高度的佈局中有沒有辦法處理文本溢出與動態文本？

我經常看到，當我必須爲後端開發人員建造sitebuild時，有一個固定高度的容器/圖層（如卡或thubnail），因爲你不能使用css屬性，因爲設計不允許它。

讓我們假設我將使用ellipsis，但文本可以是2行。 我可以使用:after或:before僞，但是如果我創建的點會在文本上溢出，或者被推出容器？ 如果我使用Javascript並且最大限度地增加字符數量，它會打破這樣的世界：Hello worl...。 是的，我們可以最大化每個字段中後端的字符，但有時在較小的設備（平板電腦，手機）中無法正常工作。

這是一個jsfiddle如果我沒有以良好的方式告訴我在想什麼。

我的問題是，解決這個問題的最佳做法是什麼？

Answer 1

你嘗試線鉗

.line-clamp { 
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
} 

看看這個網址以獲得更多幫助 Line Clampin’ (Truncating Multiple Line Text)