什麼是更優雅的方式來處理大型文本字符串，截斷或通過CSS隱藏？

Question

我現在正在一個視頻網站上工作，很多標題都比他們應該的要長。如果標題長於2行，頁面佈局會中斷。這發生在網站上的許多不同的地方。

通過佈局破壞我的意思是，它看起來雜亂不對稱，事情不排隊。那麼處理這些長字符串的更好方法是什麼？如果我使用截斷，那麼幾乎所有東西都會被截斷，並且在所有內容的末尾都有「...」。

另一方面，設置一個固定的高度，並使用溢出隱藏看起來更好，但它顯然不告訴用戶有更多的標題和突然結束。那麼你們認爲什麼是更好的選擇？

Answer 1

一兩件事，我已經在過去做的是使用漸變圖像（或CSS3漸變上的跨度），並且絕對把它放在它的右端，所以當它們接近尾聲時，這些單詞就會淡出。

除此之外，我經常通過點擊事件或點擊懸停事件來展開標題的其餘部分。有時我會做一個工具提示，有時我會擴展文本本身......取決於設計。

但我發現漸變的東西可以讓你知道有更多而不是太難看。

希望有所幫助。

Answer 2

這很主觀，但我認爲YouTube就是一個很好的例子。你會發現，使用YouTube你不能設置超過100個字符的標題。對我來說，這是一個更優雅的解決方案，而不是截斷和追加'...'或使用溢出（因爲這是令人討厭的IMO）。

Answer 3

你可以通過字符數來限制它的serverside，或者你可以設置css overflow：hidden。

理想的情況下，如果可能的話我會在入境點限制它，設置一個最大長度爲標題輸入

Answer 4

我認爲最好的做法是使用elipse'。 。 「。並在鼠標懸停標題文字中標題。這不會限制你的標題長度，但允許功能和佈局保存。儘可能優雅，因爲它給予的情況和非常交叉兼容。