Jump to content

stop a div box expanding when someone types long strings


Recommended Posts

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




(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








so basically my box does not change width wise.


Any help will be gratefully received :D



Link to comment
Share on other sites

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:





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:



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+ */




<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.

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.