HTML hiding content in the middle of UL or OL

Question

Hello!

I have long text that gets hidden if it exceeds 300 characters. Hiding is done with a <span> that has style="display:none;" set.

Basically, after the 300th caracter the rest of the content in wrapped inside that display:none span.

The algorithm is clever enough not to break text in the middle of a tag, so the invisible span will always occur after ending a tag.

The problem I have only happens in Mozilla and that's when the 300th caracter happens to be in the middle of a UL or OL. The rest of the browsers behave properly, hiding the part of the list that's outside the span and showing the other part, but Mozilla doesn't.

Any idea how I can fix this please?

UPDATE:
Code:

<ul><li>a</li><li>b</li><li><span style="display:none;">c</li></ul></span>

I know it's invalid markup because of the overlapping tags.

Thank you.

Answer 1

Fix your markup. If you properly close the span tag inside the <li>, it should work correctly.

<ul><li>a</li><li>b</li><li><span style="display:none;">c</span></li></ul>

Closing the <span> outside the list may be convenient, but for the browser to properly parse it, you need to use proper markup where possible. If you can't figure out how to close it within the <li>, maybe you need to re-think your code.