undroid undroid - 28 days ago 9
jQuery Question

CSS \ JS - Long li text is expanded by default (overflow should be hidden)

I have several

li
s with some text in them. The width is limited, so the user is able to see the first 30 characters. I'm trying to achieve two things, add
...
after the first 30 characters (obviously
...
should disappear in expanded mode), and the second thing is the ability to expand the
li
to show the whole text. Right now, the text is expanded by default, can't understand why.

fiddle here.

HTML:

<div>
<ul>
<li id="a">normal length text</li>
<li id="b">this is a relatively long text</li>
<li id="c">this is an example of a really long text</li>
<li id="d">this is an example of an extremely long, pointless text. this is an example of an extremely long, pointless text</li>
</ul>
</div>


CSS:

div {
width: 250px;
}

div ul {
text-align: left;
padding: 0 10px;
}

ul li {
list-style-position: inside;
overflow: hidden;
//text-overflow: elipsis;
}


JS:

$("li").on("click", function() {
var titleLength = $(this).context.innerHTML.length;
if (titleLength > 30) {
if ($(this).height() == 18) {
$(this).css('height', 'auto');
var height = $(this).height();
$(this).height(18).animate({height: height}, 200)
} else {
$(this).animate({
height: 18
}, 200)
}
}
});

Answer

You're not giving your li elements any restricted height by default, meaning they default to auto, thus encompass the entire string.

As your jQuery code sets their height to 18px when closed, simply add the following:

ul li {
  height: 18px;
  ...
}

Modified JSFiddle.


On top of that:

  1. You've spelled "ellipsis" incorrectly in your text-overflow property.
  2. The text-overflow property will be ignored without specifying adding a white-space property with a value of nowrap.
  3. After doing that, you'll need to remove and re-add the white-space property within your jQuery.

Here's another modified JSFiddle demo with all the above taken into consideration.