How to Force a Long String Without Any Blank to Be Wrapped

How can I force a long string without any blank to be wrapped?

for block elements:

<textarea style="width:100px; word-wrap:break-word;">  ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC</textarea>

Forcing a long line of text (without spaces) to line break according to parent containers static width using CSS

You can use this to wrap :

.wrap { 
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera <7 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* IE */
}

How to break a long string and make it continue on the next line?

Use something like:

p.test {
word-break: break-all;
}

wordwrap a very long string

This question has been asked here before:

  • Who has solved the long-word-breaks-my-div problem? (hint: not stackoverflow)
  • word wrap in css / js
  • CSS: how can I force a long string (without any blank) to be wrapped in XUL and/or HTML
  • CSS overflow with long URL

Long story short:

As far as CSS solutions go you have: overflow: scroll; to force the element to show scrollbars and overflow:hidden; to just cut off any extra text. There is text-overflow:ellipsis; and word-wrap: break-word; but they are IE only (break-word is in the CSS3 draft, however, so it will be the solution to this 5 years from now).

Bottom line is that if it is very important for you to stop this from happening with wrapping the text over to the next line the only reasonable solution is to inject ­ (soft hyphen), <wbr> (word break tag), or (zero-width space, same effect as ­ minus hyphen) in your string server side. If you don't mind Javascript, however, there is the hyphenator which seems to be pretty solid.

How to wrap long lines without spaces in HTML?

I haven't personally used it, but Hyphenator looks promising.

Also see related (possibly duplicate) questions:

  • word wrap in css / js
  • Who has solved the long-word-breaks-my-div problem? (hint: not stackoverflow)

Wrapping long text without white space inside of a div

You can't wrap that text as it's unbroken without any spaces. You need a JavaScript or server side solution which splits the string after a few characters.

EDIT

You need to add this property in CSS.

word-wrap: break-word;

Can't break a long string/text, it exceeds the width of html div

wirte this in your css word-wrap:break-word;
css:

#id_div_comments p{
word-wrap:break-word;
}

How can I wrap or break long text/word in a fixed width span?

You can use the CSS property word-wrap:break-word;, which will break words if they are too long for your span width.