如何將div保留在一行上並追加省略號

Question

css中有沒有一種方法可以確保div或類只有一行文本，並且如果它運行結束，那麼在其上追加省略號？我知道你可以將div/class設置爲一定的高度，並且overflow:hidden，但是我想要做的事情看起來很奇怪。

在下圖中，您會看到右側的div大於左側的div。如果我可以用一個橢圓形來表示歌曲的名字，它們的高度都是一樣的。任何人都知道如何做到這一點？附：我想要一個更好的方式，而不是像在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屬性不會強制溢出發生;這樣做，使文本溢出應用，作者必須在元素上應用一些附加屬性，例如將溢出設置爲隱藏。「}