开发者

Truncate text if it atempts to run into three lines

开发者 https://www.devze.com 2023-01-01 13:33 出处:网络
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 inf

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


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


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消