Forum Moderators: not2easy

Message Too Old, No Replies

text "wrapping" with css

         

Driber

12:17 pm on May 11, 2010 (gmt 0)

10+ Year Member



Is there a css property that lets you do the following?

before:

The quick brown fox jumps over the lazy
dog.


after:

The quick brown fox jumps
over the lazy dog.


The idea is that I have a DIV of 320 pixels wide into which text is placed taken from a mysql database.
When the end is reached, the rest of the text is placed on a new line. (the word "lazy" is the last one fitting in the 320px wide box.)

But what I would rather have is that the text is equally divided between the 2 lines.

Is this possible with css?

Driber

2:44 pm on May 12, 2010 (gmt 0)

10+ Year Member



anyone?

rainborick

5:09 pm on May 12, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



CSS doesn't generally provide the dynamic calculation required to format strings in this manner. The only idea that occurs to me is to examine the string in the server-side software that fetches the information from your mySQL database and insert a '<br>' in the appropriate place within the string to force the line breaks needed to produce the kind of formatting you want.

It's been a while since I've had to calculate the display size of strings, but I think you could probably get reasonably good results by simply multiplying the length of the string by the font size in pixels. Then see if the string is long enough to require a <br>. If so, just locate the <space> character within the string that precedes the middle of the string and replace it with a '<br>'. You can improve the accuracy for proportional fonts by accounting for 'narrow' characters like lower-case i and l, periods, and exclamation points. And many programming tools provide built-in string measuring functions that you might try.