Databases
StackOverflow2013
Postsdbo
POUsing CSS text-overflow to vary the number of lines of text within an element of a set height
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing CSS text-overflow to vary the number of lines of text within an element of a set height
    text
    copied!<p>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.</p> <p>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?</p> <p><a href="http://segdeha.com/assets/imgs/stack-ellipsis.png">Code below, as rendered by Safari http://segdeha.com/assets/imgs/stack-ellipsis.png</a></p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; #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; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt; &lt;p&gt; &lt;strong&gt;Short title&lt;/strong&gt; 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. &lt;/p&gt; &lt;p&gt; &lt;strong&gt;Long title that will span more than 2 lines when we're done.&lt;/strong&gt; 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. &lt;/p&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload