javascript - 如何将 div 保持在一行并附加省略号

Question

css 中有没有办法确保 div 或 class 只是一行文本，如果超出，在其上附加省略号？我知道您可以将 div/class 设置为某个高度和overflow:hidden，但是对于我正在尝试做的事情来说它看起来很奇怪。

在下图中，您可以看到右侧的 div 比左侧的大。如果我可以将歌曲名称与省略号放在一行，它们将具有相同的高度。有谁知道如何做到这一点？PS 我想要一个比在 php 中做类似的事情更好的方法$song = substr(0, 10, $song)......希望通过 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 属性不会强制发生溢出；要这样做并应用文本溢出，作者必须在元素上应用一些附加属性，例如将溢出设置为隐藏。”}