CODEWITHSUNDEEP
css
Andrew Hedges
Andrew Hedges

Reputation: 21796

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

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?

Code below, as rendered by Safari
(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>

Upvotes: 23

Views: 43417

Answers (4)

UKM
UKM

Reputation: 305

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.

Upvotes: 0

uınbɐɥs
uınbɐɥs

Reputation: 7341

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.

Upvotes: 1

Eugene
Eugene

Reputation: 31

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)

Upvotes: 3

Magnus Magnusson
Magnus Magnusson

Reputation: 1494

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).

Upvotes: 9

Related Questions