Specify number of lines for href inside span tag

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

Research on the web as well as some former stack overflow questions ( here also ) indicate that unless white-space: nowrap is set, ellipsis does not work. That, of course, means it only works with one line of text .

Some possible JQuery plugins to compensate:

Three Dots http://tpgblog.com/2009/12/21/threedots-the-jquery-ellipsis-plugin/

jQuery Text Overflow http://www.bramstein.com/projects/text-overflow/

Auto Ellipsis http://pvdspek.github.com/jquery.autoellipsis/

Answer 2

将<span>更改为<div> ，这应该可以解决我的问题