Truncate text if it atempts to run into three lines

Question

I have a small <p> about 140px wide aligned next to a picture. In total there is space for four lines of text. The first two lines are reserved for the title and there are two lines of other info.

I want the title to be cut if it spans more than two lines else it will push the other info out of line with the bottom of the image.

The only solution I could think of was to create a div the height of two lines with an overflow to hidden. However, if the title is only one line it leaves a big gap.

The solution can be Jquery, plain javascript, CSS or even PHP (if its possible).

TIA

Answer 1

Keep in mind that the property max-height is not supported in IE6. In addition, limiting the size of text boxes can cause accessibility issues, and is generally not recommended.

As this is more of a content issue than a display issue, it's probably best to deal with it on the back end - if it's dynamic text, limit your database field to an appropriate character count, or chop it with some php (or whatever server side situation you're set up in). It's tough to establish a character count with a non-monospaced font, but if you don't limit it on the content side, you run the risk of upsetting your less visually-inclined users who may be using older browsers that don't zoom all fancy like the latest releases of safari and chrome.

Answer 2

Set the title to have a max-height of two lines