2011-03-08 43 views

回答

359

試試這個:

div { 
    border: 1px solid black; 
    width: 70px; 
    overflow: hidden; 
    white-space: nowrap; 
} 
42
在你的CSS使用

white-space:nowrap;

0

嘗試設置高度,使該塊不能增長,以適應您的文本,並保持overflow: hidden參數

編輯:這裏是的,如果你需要,你可能會喜歡什麼樣的例子顯示2行高:

div { 
    border: 1px solid black; 
    width: 70px; 
    height: 2.2em; 
    overflow: hidden; 
} 
+0

在你的情況下,nowrap選項可能會更好,但我留下了我的答案,因爲我有時會發現自己需要一個可能會有一些行循環的塊,直到它像這樣溢出:http://jsfiddle.net/NXchy/7/(已更改從Stephenmurdoch的版本鏈接,謝謝!) – 2011-03-08 12:22:54

+0

不需要這個,如果用戶想用ctrl- +打亂文本大小會發生什麼?保持高度靈活性更好。 – 2011-03-08 12:47:33

+0

如果用戶使用ctrl- +調整文本大小,應該只是工作:http://jsfiddle.net/kpKW3/ – 2011-03-08 13:20:40

57

使用white-space:nowrapoverflow:hidden

http://jsfiddle.net/NXchy/8/

+19

爲了更好看,在上面加上'''text-overflow:ellipsis;'''。 – 2016-01-19 22:50:16

+0

這可以實現沒有CSS? – nilon 2017-07-24 19:07:15

3

試試這個。它採用pre,而不是作爲nowrap我會假設你想這同樣運行<pre>但無論是將工作得很好:

div { 
    border: 1px solid black; 
    max-width: 70px; 
    white-space:pre; 
} 

http://jsfiddle.net/NXchy/11/

9

每個人都在這一個跳了!我也做了一個小提琴:

http://jsfiddle.net/audetwebdesign/kh4aR/

RobAgar得到一個點指出white-space:nowrap第一。

這裏有一些東西,如果你不想看到額外的字符伸入你的佈局,你需要overflow: hidden

此外,如上所述,您可以使用white-space: pre(請參閱EnderMB)請記住pre不會摺疊空白區域,而white-space: nowrap會。

3

我跳過這裏尋找同樣的東西,但沒有爲我工作。

有些情況下,不管你做什麼,並根據系統(Oracle Designer:Oracle 11g - PL/SQL),div將始終轉到下一行,在這種情況下,應該使用span標籤。

這對我有效。

<span float: left; white-space: nowrap; overflow: hidden; onmouseover="rollOverImageSectionFiveThreeOne(this)"> 
    <input type="radio" id="radio4" name="p_verify_type" value="SomeValue" /> 
</span> 
Just Your Text || 
<span id="headerFiveThreeOneHelpText" float: left; white-space: nowrap; overflow: hidden;></span> 
+0

巨大的幫助,這一切都爲我工作,可能花了30分鐘在這個,哈哈。奇怪的是,我沒有使用你提到的任何,CSS,JavaScript,引導和一些自定義的CSS。 – edencorbin 2015-12-23 15:39:54

6

你的HTML代碼: <div>Stack Overflow is the BEST !!!</div>

CSS:

div { 
    width: 100px; 
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis; 
} 

現在的結果應該是:

Stack Overf...
相關問題