CSS Overflow auto

Question

Hi i doing comment box in my webpage so that i am doing a validation of that comment box by not allowing the user to enter the empty comment, and a comment sholud not be greater than 255 characters it all working fine but when i enter the comment like this means

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaakjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj

this string is overflowing out of the comment box div i.e it is going like a straight line I had used css property overflow: auto; but wat i need is it should be shown like this. it should split the string

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaakjjjjjjjjj
jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj

for ex: when i comment like this The p element has both line boxes and a child box for the q element, which is a block-level element. The line boxes before the q are wrapped in an anonymous block-level box and so are the line boxes after the q. The resulting tree of boxes might be as fol

it coming up proper ... it should like this

possible duplicate of [CSS: how can I force a long string (without any blank) to be wrapped in XUL and/or HTML](http://stackoverflow.com/questions/499137/css-how-can-i-force-a-long-string-without-any-blank-to-be-wrapped-in-xul-and-o) — Gabriele Petrioli, Apr 13 '11 at 09:37

score 9 · Accepted Answer · answered Apr 13 '11 at 09:35

9

What you need is CSS word-wrap: break-word;. It is widely supported among browsers.

word-wrap on CSS3.info

word-wrap: break-word

answered Apr 13 '11 at 09:35

kapa

77,694
21
158
175

Won't word-wrap cause some problems with older browsers, being a CSS3 feature? – Liam Spencer Apr 13 '11 at 09:38
It was standardized in CSS3, though it has existed for a long time. http://caniuse.com/#search=word-wrap – kapa Apr 13 '11 at 09:41
Thanks for that. Ignore my answer, this is probably your best option. :) – Liam Spencer Apr 13 '11 at 09:42

score 2 · Answer 2 · answered Apr 13 '11 at 09:37

2

You can use CSS3 property to solve your question:

.text_wrap {
  word-wrap: break-word;
}

answered Apr 13 '11 at 09:37

Igor Popov

924
8
14

How is this different from my earlier answer? :) – kapa Apr 13 '11 at 09:39
I just started type my answer before you answer was published and published my answer after you :) – Igor Popov Apr 13 '11 at 09:43
1

Happens a lot to me either :). – kapa Apr 13 '11 at 09:46

CSS Overflow auto

2 Answers2