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

Question

在css中是否有一种方法可以确保div或类只有一行文本,如果它运行过,请在其上添加省略号？我知道你可以将div/class设置为一定的高度overflow:hidden,但是对于我正在尝试做的事情看起来很奇怪.

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

Answer 1

1. 在容器上设置宽度.
2. 设置白色空间: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设置为hidden."}