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

Tags: css css3
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?

Code below, as rendered by Safari

<!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>


Answers

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.

By : UKM


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.


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)

By : Eugene


This video can help you solving your question :)
By: admin