css - 不会溢出的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，即容器的高度，则会向文本添加省略号。