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.

Well `` tags are (without contrary styling) **inline** elements, and therefore it doesn't make sense to limit their dimensions. You can override that and make them `display: block` or `display: inline-block` and then use a `max-height` setting to limit the height. HTML/CSS don't really understand the concept of "line of text" too well. — Pointy, Jul 09 '12 at 20:40
can you post the HTML part? when you say it's not working, how is it not working (doesn't restrict # of lines, overflows, doesn't show, etc) — Rodolfo, Jul 09 '12 at 20:40
@Pointy guess you mean you can override that and make them `display:block` — Rodolfo, Jul 09 '12 at 20:41
It doesn't restrict the number of lines. The whole thing shows up. I'll post the HTML. — elemjay19, Jul 09 '12 at 20:42

score 2 · Answer 1 · edited May 23 '17 at 11:44

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/

score 1 · Accepted Answer · answered Jul 09 '12 at 20:46

1

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

answered Jul 09 '12 at 20:46

Rodolfo

4,155
23
38

because div is a block level element which allows the max-height rule to be obeyed, the sap you have at the moment is an inline element which you can't set a height on, if for some reason you need it to stay a span use the css property display: block on it – Gilsham Jul 10 '12 at 03:29

Specify number of lines for href inside span tag

2 Answers2