2

Possible Duplicate:
Is there a way to word-wrap text in a div?

I have this css and html issue. I have a description and I want to fit it in a box that is 100px wide and I want the text to flow down the page. I have set up a div like thisL:

<div style="width:100px; border:1px Solid Black; height:200px; overflow:scroll; "><p>text here...</p></div>

However when I put text in and there is no white space the text does not wrap. So if a user was to put in one word that spanned more than 100px wide then the text will flow off to the right which I dont want....

Any way to stop this? I noticed facebook wall posts dont do this behaviour....

Community
  • 1
  • 1
Exitos
  • 29,230
  • 38
  • 123
  • 178

4 Answers4

5

The most straight forward way is to use word-wrap: break-word

See it in action

Mark
  • 3,231
  • 3
  • 32
  • 57
0

  1. CSS solution : use overflow:hidden and overflow-x:hidden

  2. Backend solution: if you are using a scripting language like php to generate your page, use "word wrap" technique to break the long word data.

DhruvPathak
  • 42,059
  • 16
  • 116
  • 175
0

Please refer to this question.

word-wrap : break-word is the most compatible way going forward, but will not help in some browsers that are still widely used.

Community
  • 1
  • 1
MaxVT
  • 12,989
  • 6
  • 36
  • 50
0

change height to min-height and remove overflow and use word-wrap: break-word :

<div style="width:100px; border:1px Solid Black; min-height:200px;word-wrap: break-word; "><p>text here...</p></div>

but remember if user does not type any space, no browser will break it to multiple lines!

Farzin Zaker
  • 3,578
  • 3
  • 25
  • 35
  • `"if user does not type any space, no browser will break it to multiple lines"` ..unless you use `word-wrap: break-word`. See a recent answer of mine that includes a demo: http://stackoverflow.com/questions/5852700/help-in-auto-break-line/5852740#5852740 – thirtydot May 03 '11 at 08:45