CSS/PHP Question

February 17, 2004 6:53 AM

CSS or maybe PHP question about limiting the display size of content. More inside, of course.

I'm only somewhat familiar with CSS (learned from W3 Schools) and am pretty new to PHP. I'm also using pMachinePro. I have layed out a site for a client (screen grabs 1 2 3) that I'm now thinking won't work the way I thought it would.

I want to limit the text visible in the rectangles (gigs, latest news, etc.) I have no problem rendering the pages with CSS (making the rectangles appear where I want), but is there an easy way to have CSS or PHP limit the content automatically so that the boxes don't have scroll bars (iframes) or overflow text?

posted by dobbs to computers & internet (7 answers total)

The CSS clip property might do the trick.
posted by staggernation at 6:59 AM on February 17, 2004

stagger, yeah I looked at that one. But doesn't that literally clip the content? Meaning, won't it cut a sentence in half (horizontally) that extends below the box bottom? I would therefore still have to eyeball the content going into each box (or line count it--and then that would change if someone adjusted the font)...?
posted by dobbs at 7:04 AM on February 17, 2004

Ah, I see. So you're trying to truncate the text, but only at the end of a sentence? Do you want to limit the length of what the user is allowed to enter into the CMS, or do you want to let them enter text of any length but then cut it off on the display side?

Can you give an example of the type of data you're concerned about—the full text, why it would be problematic, and the output you'd like to see?

In general, I would say that this sort of thing is tricky because while it's easy (with PHP or whatever) to limit text to a number of words or characters or sentences, you don't know how tall the displayed text will be on the page unless you're certain of what platform/browser/font/font size the user is using.
posted by staggernation at 7:33 AM on February 17, 2004

well, this depends on what exactly you want. do you want a short blurb, like the first paragraph, and then a link to go on, or do you want all the text displayed, but if it doesn't fit in the box, it is not shown?

for the latter, the css property overflow will work very well.

for the former, which i assume is what you want, you will have to use some string functions in php to limit the size of the string to print into the rectangle. the tricky part here is that it will not be a sure fire thing. since the user can adjust the text size and browser size and such, things won't be the same everywhere.

hope that was of some help.
posted by chrisroberts at 7:35 AM on February 17, 2004

Hmm. Okay, let me see if I can explain this better.

On this page, you have one box that says The Latest and another that says Gigs.

Essentially gigs and latest are two separate blogs built using pMachinePro, which allows you to list multiple blogs on a single page.

So, the page in the screen grab is the front page of the site which will have "samples" from the gigs and latest blogs in their little boxes/windows.

I want each of those boxes to show as much text from each of those blogs (the latest entries from them) that will fit in their box. Then, at the bottom of each box I'll have a "More Gigs" or "More news" and each of those links will lead to the full blog for gigs and latest news.

The full blogs for Latest and Gigs may be two screens worth of text on their own pages. But for this front page I want to just display X pixels worth of text.

Does that makes sense?

chrisroberts, I think I actually want the latter. If I'm understanding the overflow property correctly, it's what I want. if I set it to hidden, it will essentially be pulling the whole blog from Gigs but only displaying the amount I set for the height of the box and the rest will just be invible. I can then just put a "more" graphic at a higher z-index that links to the full blogs...

but does it hide that text elegantly (end of sentence or whatever) or just lop it off?
posted by dobbs at 8:22 AM on February 17, 2004

but does it hide that text elegantly (end of sentence or whatever) or just lop it off?

Lops it off. What you would do is define the box with position: relative and a bit of padding-bottom. Then give it overflow: hidden and absolutely position your "more" link at the bottom right of the box. If you want to truncate the text cleanly, you're going to need to do some character counting in PHP. I don't think there's any currently-supported CSS that will do this for you.

I don't know how the data's coming in (is there a way you can query pMachinePro?), but you should be able to split the indiviudal items into an array and then only output items until the combined character count hits your threshold (whatever that may be).
posted by yerfatma at 8:28 AM on February 17, 2004

Okay, thanks guys.
posted by dobbs at 9:47 AM on February 17, 2004