gene b. gene b. - 9 months ago 44
CSS Question

DIV Truncated with Ellipsis in Short Form, Expanded on Clicking Icon

In this fiddle I need to truncate a DIV to an initial width of 250px, which I am doing already with '...'; on clicking my own '?' button it then expands to 500px:


.truncate {
width: 250px;
/* need automatic multi-line height */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border:1px solid #999999;
float: left;
word-wrap: break-word;


$('.helpicon').on('click', function () {

My problems:

1) The expanded DIV must be multi-line, variable height. Right now it overflows, even with the word-wrap. Setting a height doesn't work.

2) Is there a way to make the '?' part of the truncated DIV?

3) There should be a 'Hide' link once expanded to revert to the original compressed version.

Thanks a lot!


A very quick example. You can do it by adding/removing a class. Set class specific style for the properties you need.

.truncate.truncated {
    white-space: initial;
    width: 500px;


IE11 does not like initial for white-space. Use inherit if applicable or normal to revert to default.

.truncate.truncated {
    white-space: initial;
    width: 500px;