如何在div元素中隱藏太長的文本？

這裏的文字只是包裝到一個新的行，如果文本比格長

<div style="width:50px; border:1px solid black; overflow-y:hidden"> 
    test test test test 
</div>

來源

2011-09-30 clarkk

'溢出：無;' –

@JohnnyCraig - 那裏是沒有這樣的事 '溢出：無' – Rob

感謝搶劫。我的錯誤，它發生，但不是告訴人們什麼沒有，你還應該包括什麼.'overflow：hidden;' –

嘗試溢出：無;

你沒有提到你是否想要滾動條。

編輯：

對不起，我的意思溢出：隱藏。

來源

2011-09-30 14:52:55

'overflow'屬性沒有'none'值。參見[CSS2規範]（http://www.w3.org/TR/CSS2/visufx.html#propdef-overflow）。 – kapa

他已經在Y軸上使用了'hidden'。 – kapa

你應該爲你的div指定一個height，overflow: hidden;只能隱藏垂直溢出的內容，如果有某種定義的高度。

換句話說：

這裏的文字只是包裝到一個新的行，如果文本比格

不再不過是多久div實際上？

請檢查出my jsFiddle demonstration，說明區別。

來源

2011-09-30 14:53:29 kapa

即使指定高度，文本仍然包裝到一個新的行..但有溢出 - 是 – clarkk

@clarkk然後你想要達到什麼樣的目的？ – kapa

如果您只想在固定寬度div中顯示單行文本，請給white-space:nowrap一個去。與overflow:hidden一起，它會強制您的瀏覽器不要破壞該行並將視圖裁剪爲強制寬度。

您可能還會添加text-overflow:ellipsis，以避免將單詞和字母分成兩半，並在最後添加一個不錯的...，以顯示您缺少一些位。雖然我不確定瀏覽器的支持，但我從來沒有嘗試過這個。

來源

2011-09-30 16:28:27 DarthJDG

Firefox 7剛剛問世，它是第一款支持「文本溢出」的Firefox。其他瀏覽器支持它（甚至是舊的IE）。請參閱[caniuse.com上的文本溢出]（http://caniuse.com/#search=text-overflow）。和+1。 – kapa

CSS屬性text-overflow: ellipsis也許可以幫助你解決這個問題。

考慮下面這個HTML：

<div id="truncateLongTexts"> 
    test test test test 
</div> 

#truncateLongTexts { 
    width: 100px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis // This is where the magic happens 
}

來源

2015-07-09 05:22:34 jhunlio

如何在div元素中隱藏太長的文本？

回答

相關問題