gene b. gene b. - 6 months ago 24
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:

https://jsfiddle.net/my8jpn01/16/

CSS

.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;
}


JS

$('.helpicon').on('click', function () {
$('.truncate').css('width','500px');
$('.truncate').css('overflow','visible');
});


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!

Answer

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;
}

DEMO https://jsfiddle.net/my8jpn01/19/

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;
}
Comments