Is there a way to wrap html text when using "all one word"?

Question

Possible duplicate:
Is there a way to text text in a div?

I have a problem with css and html. I have a description, and I want to put it in a box with a width of 100 pixels, and I want the text to go on the page. I created a div as thisL:

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

However, when I put the text and there is no space, the text does not wrap. Therefore, if the user had to insert one word that would cover a width of more than 100 pixels, then the text will flow to the right, which I do not want ....

How to stop this? I noticed that facebook wall posts do not do this behavior ....

Answer 1

The easiest way is to use word-wrap: break-word

Look in action

Answer 2

• CSS solution: using overflow: hidden and overflow-x: hidden

• Backend solution: if you use a scripting language such as php to create your page, use the "word wrap" method to break the data of a long word.

Answer 3

Please refer to this question .

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

Answer 4

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 the user does not enter a space, no browser breaks it into several lines!