一個不會溢出的div

Question

我有一個div可以保存一些文本。 div的寬度以像素爲單位固定。我想確保如果文本比div中的一行佔用更多空間，文本不會溢出並且不會換行到第二行。我只是希望它能夠在一行上顯示適合div的寬度。我一直在試驗

{ 
    overflow:hidden; 
    height:1em; 
    width:160px; 
} 

它有時可以工作，但我沒有合適的身高。什麼是正確的高度？可能有更好的方法來做到這一點。請告訴我。謝謝！

謝謝大家的貢獻。這裏是我工作：對於一個div ：

{ 
    height:1.2em; 
    text-overflow:ellipsis; 
    overflow:hidden; 
    white-space:nowrap; 
} 

注意兩個text-overflow:ellipsis;和white-space:nowrap;需要在那裏的省略號來顯示。

而且針對跨距注意，跨度沒有寬度，所以你需要添加：

{ 
    display:inline-block; 
    width:160px; 
} 

的跨度工作

Answer 1

overflow:hidden; 
height:1em; 
width:160px; 
text-overflow: ellipsis; 
line-height: 1em; 

將增加一個省略號以文本，如果它溢出封閉div並將div設置爲僅使用1em，即容器的高度。

Answer 2

white-space: no-wrap將防止文本換行。

Answer 3

設置段落的線條高度，然後將div高度設置爲相同。 只需注意文本通常比1em高，1.3或1.4通常更好。

嘗試一下這裏：http://jsfiddle.net/PYA3y/

#mydiv{ 
    overflow:hidden; 
    height:1.4em; 
    width:160px; 
} 
#mydiv p{line-height:1.4em;} 

編輯：

在我寫我的回答的時候，你還有其他3個答案！ Scott對於使用省略號有一個好主意，我已經更新了JSFiddle來包含它（儘管它不起作用??）

如果我理解正確，設置空格將不會給你結果需要......你確實想要額外的文字被隱藏，不是嗎？

Answer 4

{ 
    white-space:nowrap; 
    overflow:hidden; 
    height:1em; 
    width:160px; 
}