Fixed dimension blocks with overflow/clipping?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Fixed dimension blocks with overflow/clipping?

Post by alex.barylski »

I have a homepage full of information, various news feeds, classifieds, latest messages in the forum, etc.

As it stands each is variable width and height and it looks not nice. I want to place each section in a fixed sized DIV and use a floated "more" link in each so users can opt to see more if they wish.

Is there anyway to clip text that is greater in horizontal/vertical viewport -- preferably showing an ellipsis???

I am currently truncating the text based on the estimated maximum width a sequence of characters should be. Obviously this fails if the user enters all WWW's as the body text.

It would be nice if I could set the width/height of a DIV and have the horizontal tetx clipped and an ellipsis shown instead

Any ideas???
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Fixed dimension blocks with overflow/clipping?

Post by kaszu »

To clip long words you can use wbr tag, and to clip off text if it exceeds container width/height use "overflow: hidden" css property.
Post Reply