CSS溢出 - 只有1行文字

我有div具有以下css樣式：CSS溢出 - 只有1行文字

width:335px; float:left; overflow:hidden; padding-left:5px;

當我插入，成div，文字的長線，它打破到一個新的生產線，並顯示所有文本。我想要的是隻有一行文本不會換行。當文本很長時，我想讓這個溢出的文本消失。

我在考慮設置高度，但它似乎是錯誤的。

也許如果我添加與字體相同的高度，它應該可以工作並且不會在不同的瀏覽器中引起任何問題？

我該怎麼做？

來源

2011-09-25 some Folk

你可以在[jsFiddle]（http://jsfiddle.net/）上演示你的問題嗎？ –

242

如果您想將其限制爲一行，請在div上使用white-space: nowrap;。

來源

2011-09-25 15:16:20 Septnuits

很好，謝謝！ –

你應該接受他的答案，然後點擊左邊的箭頭。 – DanMan

真棒，謝謝！ –

-8

line-height:335px;

你可以試試這個...

來源

2011-09-25 15:20:01 bshener

...這有何幫助？ – Archonic

如果你想表明，在該專區還提供更多的內容，你可以大概要顯示的「省略號」：

text-overflow: ellipsis;

這應該是除了由Septnuits建議的white-space: nowrap;之外。

此外，請確保您結帳this thread在Firefox中處理此問題。

來源

2011-09-25 15:32:10 Mouli

+35

我相信你必須使用'text-overflow：ellipsis;'用'overflow：hidden;'和'white-space：nowrap;'使它工作 –

http://caniuse.com/#feat=textoverover aka 。是的你可以。考慮將整個內容放在title屬性中，這樣用戶仍然可以訪問它。 – DanMan

我只顯示在一行，並沒有填充DIV顯示省略號之前... http://stackoverflow.com/questions/26342411/how-to-display-an-image-next-to-some-texts （http://jsfiddle.net/ofrj55j4/20/） – SearchForKnowledge

我有同樣的問題，我解決它使用：

display: inline-block;

有問題的div。

來源

2014-06-03 13:07:02 Dekcolnu

你可以使用這個CSS代碼：

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

的文本溢出財產CSS處理的是文本進行裁剪時溢出的元素框的情況。它可以是剪輯（即切斷，隱藏），顯示省略號（'...'，Unicode範圍值U + 2026）。

注意文本溢出只有當容器的overflow屬性有發生價值隱藏，滾動或汽車和空白：NOWRAP;。

文本溢出只能發生在塊或內聯塊級元素，這是因爲元件需要具有寬度，以便溢出-ED。溢出發生在由方向屬性或相關屬性確定的方向上。

來源

2017-03-28 05:25:27

省略號！一個解釋是什麼以及它爲什麼很酷很好，但是... – benzkji

CSS溢出 - 只有1行文字

回答

相關問題