當它超過div的寬度時如何切斷文本

我有一個寬度爲300px的div，當我在其中填充文本時，只有當用戶輸入正常文本時，例如「Hello，would，my name是kesong「，如果句子太長，它會自動在下一行開始，因爲div可以檢測最後一個單詞是否可以保持在同一行。但是，如果用戶輸入類似於每個長文本之間沒有任何空格，比如「HELLOWOLRDTHISISKESONGHELLOWOLRDTHISISKESONG ...」超過div的寬度，文本將不會被截斷，並且會在同一行的div之外顯示。當它超過div的寬度時如何切斷文本

來源

2014-03-13 Kesong Tse

'word-wrap'就是你想要的。 – Philip

@ user3385402，真棒，問題解決了 –

不要忘記溢出：隱藏 – Banana

在此的jsfiddle看看：http://jsfiddle.net/yM2vL/1/

基本上，你需要設置

text-overflow: ellipsis; 
white-space: nowrap; 
overflow: hidden;

在CSS

（或硬編碼的風格，但CSS是清潔劑）。如果要完全切斷文本，請使用：

text-overflow: clip;

參見：https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow其他選項

來源

2014-03-14 00:04:01 ramblingWrecker

或更好，請參閱[MDN]（https://developer.mozilla.org/en-US/docs/Web/CSS/文本溢出），因爲[w3schools]（http://w3fools.com）經常有完全不正確的信息。 –

您可能需要使用word-wrap和white-space CSS屬性的組合。

這裏有一個潛在的解決方案（由以下指南針mixin很大程度上啓發）：

div { 
    word-wrap: break-word; 
    white-space: pre; 
    // CSS 2.0 
    white-space: pre-wrap; 
    // CSS 2.1 
    white-space: pre-line; 
    // CSS 3.0 
    white-space: -pre-wrap; 
    // Opera 4-6 
    white-space: -o-pre-wrap; 
    // Opera 7 
    white-space: -moz-pre-wrap; 
    // Mozilla 
    white-space: -hp-pre-wrap; 
    // HP Printers 
}

如果要真正地切斷在某些情況下（即不帶空格的長字）的文本，但包裹其他情況下的文本（即有空格的許多單詞），那麼這將涉及更多。我不認爲這種情況只有純CSS的解決方案，你可能需要Javascript和CSS的組合text-overflow property with ellipsis。

來源

2014-03-14 00:16:02 richsinn

當它超過div的寬度時如何切斷文本

回答

相關問題