Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 11 down vote favorite
8

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.

share|improve this question

2 Answers

up vote 19 down vote accepted

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/

share|improve this answer
wow, so simple, didn't know about existence of text-overflow, thanks! – Ilya Jun 1 at 10:26
Hi, noticed interesting thing, if you set a background colour to #text div, it doesn't work on hover jsfiddle.net/qyNUG/3 any ideas how to fix it? even tried setting it to !important, didn't work – Ilya Jun 1 at 12:19
well nvm, got it jsfiddle.net/qyNUG/4 – Ilya Jun 1 at 12:22
up vote 3 down vote

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;
}
share|improve this answer
The reason I use max-width is so that I can have a transition on the revealing of the text, like so jsfiddle.net/jamestoone/RPgaN/4 – Parallel 2ne Jun 1 at 10:22
good idea, but why "max-width"? Wouldn't just width work? – thg435 Jun 1 at 10:31
You could use width in this example but I feel that max-width was more fit for purpose as an element to which a max-width is applied will never be wider than the value specified. – Parallel 2ne Jun 1 at 10:43

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.