Menu
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> 
873
To clip at the transition between characters you can specify text-overflow as an empty string, if that is supported in your target browsers: text-overflow: ''; . This keyword value will display an ellipsis ( '…' , U+2026 HORIZONTAL ELLIPSIS ) to represent clipped text.
A text-overflow property in CSS is used to specify that some text has overflown and hidden from view. The white-space property must be set to nowrap and the overflow property must be set to hidden. The overflowing content can be clipped, display an ellipsis ('…'), or display a custom string.
The CSS max-lines property is used to limit a block content to a maximum number of lines before being cropped out. The max-lines property can create a clamping effect with the block-overflow property.
The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or display a custom string.
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).
174
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)
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
