Jump to content

stop a div box expanding when someone types long strings


Orionsbelter

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

 

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

 

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

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

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