Using CSS text-overflow to vary the number of lines of text within an element of a set height

Question

I'm deep into some iPhone (Safari/WebKit) web app development at the moment and want to have items of a set height with title text and body text such that 3 lines are always showing. If the title text is short, 2 lines of body text should show. If the title text is very long, it should take up a maximum of 2 lines and leave 1 line for body text. Whenever text is truncated, it should display an ellipsis as the last character.

I've come up with the following that does everything I need, except that it does not display the ellipsis. Is there a way to get this solution to satisfy that last requirement?

_{(source: segdeha.com)}

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">

        #container {
            width: 100px;
        }

        p {
/*          white-space: nowrap; */
            font-family: Helvetica;
            font-size: 12px;
            line-height: 16px;
            text-overflow: ellipsis;
            max-height: 48px;
            overflow: hidden;

            border: solid 1px red;
        }

        strong {
/*          white-space: nowrap; */
            font-size: 16px;
            display: block;
            text-overflow: ellipsis;
            max-height: 32px;
            overflow: hidden;
        }

        </style>
    </head>
    <body>
        <div id="container">
            <p>
                <strong>Short title</strong>
                This is the text description of the item. 
                It can flow onto more than 2 lines, too, 
                if there is room for it, but otherwise 
                should only show 1 line.
            </p>
            <p>
                <strong>Long title that will span more 
                than 2 lines when we're done.</strong>
                This is the text description of the item. 
                It can flow onto more than 2 lines, too, 
                if there is room for it, but otherwise 
                should only show 1 line.
            </p>
        </div>
    </body>
</html>

I looked at http://iphone.facebook.com in Safari (spoofing the iPhone user agent) and it looks like they do this server-side. I suspect I'm doomed to the same fate. — Andrew Hedges, Jul 01 '09 at 03:49
I have wanted to do something similar in the past. I ended up trying to split the lines and add the ellipsis server-side. That ended up requiring me to know how wide and tall the text would be (in pixels). Eventually I gave up frustrated. — Symen Timmermans, May 02 '11 at 14:39
It's to bad Media Queries don't support this. It would be great if you could do something like... @media id="myIdHere" and (max-height:32px) {strong{content:'...';}} — Adam Youngers, Jun 07 '12 at 20:24
You will need to specify `white-space:nowrap` to get `text-overflow` to work properly. That means you are constrained to a single line of text. So it looks like what you want is not achievable with CSS alone. :( (source: http://www.quirksmode.org/css/textoverflow.html) — Calvin, Jun 12 '12 at 21:13

score 9 · Answer 1 · answered Jun 07 '12 at 00:08

One solution to this problem is to fade the text out rather than to add an ellipsis. If this is an acceptable alternative for you then please read on.

Since the line height is fixed at 16px you can use a simple png image with a gradient (or use a css3 gradient) that goes from transparent to the relevant background color and position it in the lower right corner of the paragraph.

The same will work for the headline if you position the gradient image 16px from the top so that it will only be visible if the heading reaches two lines (thanks to overflow hidden).

score 3 · Answer 2 · answered Jun 07 '12 at 00:29

3

You can specify the font size to be used within this field (font-size), then fix the height and width of the field (because now you know how many lines of font-size size can fit), and then use the overflow property (not text-overflow)

answered Jun 07 '12 at 00:29

Eugene

31
1

score 1 · Answer 3 · answered Jun 20 '12 at 02:31

1

Try this one: jsfiddle.net/7BXtr/. It only uses CSS (no JavaScript).

Basically, the text has overflow: hidden applied, and ... is positioned after it.

Downsides:

An ellipsis will always appear after the description, even if it is short.
The ellipses always appear at the same positions on the right.

answered Jun 20 '12 at 02:31

uınbɐɥs

7,236
5
26
42

Problem is, the ellipses will always be inserted, even if the text is too short. – leopic Sep 22 '12 at 16:12
@LEOPiC I know, it is just a hacky way to get it almost there. – uınbɐɥs Sep 22 '12 at 21:37

score 0 · Answer 4 · answered Sep 24 '14 at 01:50

I know this is too late of a response. But for others looking for the same problem: I am developing on top of Magnus Magnusson answer.

To create a translucent shade, you can use the box-shadow property which can be used to create an inner shade effect.

Using CSS text-overflow to vary the number of lines of text within an element of a set height

4 Answers4

Linked