Automatically add "..." if text extends certain width, but show it on hover?

Question

I'm trying to do the following, having a <div> of certain width, lets say 30% and than 1 line of text in it, however I want to show ... if text is to long, also width of the <div> will be changing, as it is a responsive design, so ... should adjust accordingly. But if a person hovers over that <div>, it should extend it's width (it will be absolutely positioned, so going out of certain borders is allowed.) and show all text, on the same line.

Example:

This is text that fits

This is text that doesn't fit inside ...

This is text that doesn't fit inside, but is visible on hover.

Not sure if it can be done with pure HTML and CSS and work cross browser, maybe some overflow hidden backup? or JQuery, if it can't be achieved with anything else.

Answer 1

This is possible with pure CSS:

#test {
    width: 50px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

#test:hover {
    overflow: visible;
}

http://jsfiddle.net/qyNUG/

Answer 2

This is a css3 version that is based on a pixel width. If you had a container which was a certain size that you wnated this text to work within then you could use width: 100%; to work within it.

jsfiddle

<p>This is text that doesn't fit inside, but is visible on hover.</p>


p {
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
p:hover {
    max-width: none;
}