How to keep div on one line and append ellipses

Question

Is there a way in css to make sure that a div or class is only one line of text, and if it runs over, append ellipses on it? I know that you can set the div/class to a certain height and overflow:hidden, but it looks strange for what I'm trying to do.

In the picture below you see that the div on the right is larger than the one on the left. If I can make the name of the song one line with ellipses, they will both be the same height. Anyone know how to accomplish this? P.S. I want a better way than doing something like $song = substr(0, 10, $song) in php... something hopefully possible with CSS.

Answer 1

1. Set a width on the container.
2. Set white-space: nowrap.
3. Set text-overflow: ellipsis.
4. Hide the overflow*

Demo: http://jsfiddle.net/jD99d/

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

See https://developer.mozilla.org/en-US/docs/CSS/text-overflow

^{* Note that "This CSS property doesn't force an overflow to occur; to do so and make text-overflow to be applied, the author must apply some additional properties on the element, like setting overflow to hidden."}