Jump to content

stop a div box expanding when someone types long strings


Orionsbelter
 Share

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.

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.

 Share

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