Find out how many lines will a text expand?

[TheProgrammer]

Hello people!

Here's what I'm trying to do. I must extract some text out from a Mysql database and write it down in a page that must have rigid (unalterable) width/height (it uses a lot of images and will screw up if more text lines are inserted - god, these designers  ::) ). Anyway, the width is no problem as I can set it with css from the begining but in case the text extracted from the database will take too much space (height), it's quite stupid.

The obvious solution is to trim it at the end, eventually add three dots so people will know that it's more text there. But how do I know how many lines the text will take? I have a fix font (Verdana, bold) and a fix font size (10px), but this is not much help.

The stupid solution  :D would require me to write a text down in Photoshop for example with every letter, measure the widths of wach letter and symbol than make an array of these widths, and by doing this i will be able to calculate the entire with of the text, and so, how many lines will take. You imagine, i find it quite unefficient, so I thought you guys might know some tricks. An estimation for the number of lines would do, it doesn't have to be exact. If you can give me a hand I would really appreciate it.  ;)

PS: ohh, i thought also at [b]imagettfbox[/b] function but from what I can tell this only gives you the size of the text if you write the text on one line. It's not the case.

Thank you very much,
Cristian

[Psycho]

Aside from doing the calculations you spoke of, there really isn't any other way. I used to work on a commercial web-based application designed for the printing industry where user submitted input was processed to create print-ready files. We could control text-width and spacing on the back end as we used postscript programming but there just wasn't any way to control the appearance of the input on the web-page because of the problems you describe. You can have words with the same amount of letters that can be very different in width.

A possible solution for your dillema might be to put the content within a div and use the overflow style property. If the text is too big for the div there will be scollbars. Of course, this might break the "look" of the design.

[gin]

I really hate it when a designer gives me something like that to work with. I've changed that over the last few years by going over there and looming at them when I hear a site re-design is in the offing. Really, they're crappy site designers if they haven't considered text overflow.

I'm with the above, use the overflow and let it scroll. Personally, in a similar case when I couldn't let it scroll, I just used an overflow: hidden, and let the user figure it out for themselves. Incidentally, in IE one of the properties will add an ellipsis (...) for you (can't remember which, sorry). But only in IE and no other browser.

If you really want to count chars and manually add an ellipsis, make your life easier by using a fixed-width font like uh... courier, I think it was.

[Malcerous]

This is not the best solution but it may work:
Take take the maximum amount of characters that will fit in your space with a wrap, use a Capital M or W for your calculation. Now that you know the maximum amount of characters that will fit you can then truncate the length of text. The only thing that you will have to check for is carraige return / new lines and subtract the number of characters from the line. This is an ugly process and I have done this once before.
You should always end up with Text that is smaller than the box.

I hope this may steer you in the proper direction.