stop a div box expanding when someone types long strings

[Orionsbelter]

Ok say i have a div box that 400px width and the height is dependant on the amount of content my problem is, is that when a user enters something like

 

gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg

 

(sorry to do that) it's going to expand the box more than 400px this will mean it shoots off the page i wish for it to just hit the side and then start a new line if you get what i mean.

 

so it would look a bit like

 

gggggggggggggggggggggggggggggggggg

gggggggggggggggggggggggggggggggggg

gggggggggggggggggggggggggggggggggg

gggggggggggggggggggggggggggggggggg

ggggggggg

 

so basically my box does not change width wise.

 

Any help will be gratefully received

 

 

[vinpkl]

thats possible will javascript.

 

not possible with css

 

vineet

[haku]

There are no words that long in the English language, so you should be ok. But if you are really determined, you will need either a server-side solution, or a javascript solution. It can't be done in pure html.

[Orionsbelter]

thank you for your reply could you be kind enough to either supply some example code or tell me whats its called so i can google it.

[dbrimlow]

The CSS3 property "word-wrap" is a good case of modern browsers adopting a previous proprietary Microsoft property as a good idea - adding the pseudo element :break-word ("word-wrap:break-word") will allow it to break a word in order to wrap.

 

HOWEVER! It is NOT supported by older Gecko browsers.

 

Supported browsers:

 

All IE from 5.5 - 8

All Gecko 1.9.1 browsers (as of Firefox 3.5, SeaMonkey 2, and Thunderbird 3)

Webkit browsers - Safari 1.0, Chrome 2

 

I don't know about Opera or Konqueror Software engines.

 

Here is info about it:

 

http://www.w3.org/TR/css3-text/#word-wrap

https://developer.mozilla.org/En/CSS/Word-wrap

 

Try it out, though. You add it to the select that you expect to have long text - ex:

 

.box {width:400px; word-wrap:break-word}

 

**********

 

Since you are here at phpfreaks,  a possible server side PHP solution, as Haku said:  http://us2.php.net/wordwrap

 

**********

An HTML/CSS solution is to use the Preformatted text tag "<pre>" wrapped in a paragraph or list ul li:

 

CSS:

pre {

overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */

white-space: pre-wrap; /* css-3 */

white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */

white-space: -pre-wrap; /* Opera 4-6 */

white-space: -o-pre-wrap; /* Opera 7 */

width: 400px;

word-wrap: break-word; /* Internet Explorer 5.5+ */

}

 

HTML:

<div class="box"><p><pre>long word in sentence</pre></p></div>

or in a table cell:

<td><ul><li style="list-style:none"><pre>long word in sentence</pre></li></ul></td>

 

Here is a link to the original concept - http://www.longren.org/2006/09/27/wrapping-text-inside-pre-tags/

 

Good luck.