你如何設計溢出的文字？

我有一個動態填充的列格式的無序列表，通常每個<li>只有一個或兩個字，但偶爾會出現一個更長的列表項。爲了維護我的專欄，我已經選擇隱藏這些較長的項目有省略號超出的文本：你如何設計溢出的文字？

li { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

但我還是想給這些項目的用戶訪問，所以我創建了一個hover樣式像這樣：

li:hover { 
    overflow: visible; 
}

這揭示了文成柱之間的空間，但是當它到達鄰近<li>停止。我想優先考慮徘徊的<li>，因此它顯示在其他人之上，背景不透明。玩z-index沒有伎倆。

這裏是一個小提琴：https://jsfiddle.net/9p7qeon2/

來源

2016-04-14 MrMcPlad

這似乎是你遇到的問題是具有在列的固定寬度的結果。示例：column-width: 200px由於您在孩子上使用懸停，您將無法使用純CSS更改父級的寬度。你必須使用jQuery或.addClass到UL（父）元素，然後使用類似的東西：ul.active { column-width: 300px; }，但這會對所有其他元素產生不良影響。

你會發現，以這種方式使用固定寬度將在不同瀏覽器的許多問題，例如您的問題是有些不同，這取決於使用什麼瀏覽器：

Firefox會顯示完整的文本，但將不會顯示背景顏色。
Chrome和MS邊緣會顯示背景顏色，但不是全文......坦白地說，這是正確的，因爲容器被限制爲200px。我不相信瀏覽器支持最小列寬，我的測試不能解決問題。

您可以使用浮動使用固定的百分比，這將顯示在較大的屏幕上，然後隱藏在較小的屏幕上。請參閱爲您製作的JSFiddle，顯然此代碼需要根據您的要求進行調整，但其方向正確。

總結...問題是，您設置了200px的寬度...以覆蓋該寬度，您必須使用min-width,position: fixed或position: absolute。這就是我現在能想到的。

來源

2016-04-14 16:58:36

我認爲'column-width'不像'width'那麼嚴格。我見過參考文獻，說你可以把它看作是'最小寬度'。根據w3：描述了最佳列寬。實際列寬可能更寬（以填充可用空間），或更窄（僅當可用空間小於指定列寬時）。 https://www.w3.org/TR/css3-multicol/#column-width – MrMcPlad

我去這樣做，這是在李中添加一個跨度，然後在懸停的方式有跨度變得position:absolute。有了這個，你可以控制整個文本的顯示方式和樣式。唯一的缺點是，由於跨度變得絕對，LI將需要一個高度來保證不會失去高度。 Check out the fiddle

來源

2016-04-14 18:09:19

這是一個好主意。您的小提琴在Firefox，Opera和IE 11中效果很好，但Chrome會發出一些奇怪的閃爍效果，並將其轉儲到內容的左下角。任何想法爲什麼？ – MrMcPlad

你正在運行什麼版本的Chrome？我跑50.0.2661.75米，我沒有看到這個問題。但是，如果我不得不猜測它必須爲li元素本身添加一個「position：relative」。這是唯一對我有意義的事情。因爲我相信跨度對身體是絕對的，而不是對其父母李。 –

我正在運行49.0.2623.112米，但我剛剛更新到50.0.2661.75米，閃爍仍然存在。我拍了一個屏幕截圖，以便看到我所看到的內容。 [鏈接]（http://sendvid.com/00y7iu92）我更新的小提琴（視頻中顯示的那個）在這裏：[link]（https://jsfiddle.net/kpqd5gq3/2/） The問題顯然與瀏覽器正在進行的列計算有關。如果它是單列，它希望將絕對定位的跨度放在他們將要去的地方。 – MrMcPlad

你如何設計溢出的文字？

回答

相關問題