如何在一行上保留div并附加省略号

Question

在css中是否有办法确保div或类只有一行文本，如果它运行过来，请在其上添加省略号？我知道你可以将div / class设置为某个高度overflow:hidden，但是我想要做的事情看起来很奇怪。

在下图中，您会看到右侧的div大于左侧的div。如果我可以将歌曲的名称改为带有椭圆的一行，则它们的高度都相同。有谁知道怎么做到这一点？附：我想要一种更好的方式，而不是像在PHP中做$song = substr(0, 10, $song)这样的东西......希望CSS可以实现。

Answer 1

1. 在容器上设置宽度。
2. 设置white-space：nowrap。
3. 设置文本溢出：省略号。
4. 隐藏溢出*

演示：http://jsfiddle.net/jD99d/

.my-class-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    overflow: hidden;
}

请参阅https://developer.mozilla.org/en-US/docs/CSS/text-overflow

^{*请注意“此CSS属性不会强制发生溢出;要执行此操作并使文本溢出应用，作者必须在元素上应用一些其他属性，例如将overflow设置为隐藏。“}