一个不溢出的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高度设置为相同。 请注意，文本通常高于1 em，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; 
}