Question

I have a <span> tag, .lastMessageLink, with an <a> inside it, .lastMessageText. The text that could be put in .lastMessageText could be as short as a couple characters, or as long as a paragraph, but I want to display maximum 4 lines of text.

The current styling I have, which is not working, is this:

.lastMessageLink {
    line-height: 1em;
    text-overflow: ellipsis;
    max-height: 4em;
    overflow: hidden;
}

.lastMessageText {
    color: black;
    word-wrap: break-word;
}

And here is the HTML:

<span class="lastMessageLink">
    <a id="undefined" class="lastMessageText" title="now i need a really really long message so that i can test this whole multiple lines thing which is gonna be a problem and a trickier problem than we had initially thought. it's interesting because you'd think a couple css styles would be enough, but we might have to go by characters" href="#conversation:cid=10714&amp;mid=10735">
        now i need a really really long message so that i can test this whole multiple lines thing which is gonna be a problem and a trickier problem than we had initially thought. it's interesting because you'd think a couple css styles would be enough, but we might have to go by characters
    </a>
</span>

I have looked at HTML/CSS: Specify number of lines inside <span>, Limit text length to n lines using CSS, Using CSS text-overflow to vary the number of lines of text within an element of a set height, and How to set element height for a fixed number of lines of text.

I am open to solutions that use jQuery or Javascript as I have been unable to make progress solely with CSS.

Answer 1

change <span> to <div> and that should do the trick I think