231

I have a long string (a DNA sequence). It does not contain any whitespace character.

For example:

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA

What would be the CSS selector to force this text to be wrapped in a html:textarea or in a xul:textbox?

1
  • 20
    Ironically the string doesn't break in Stack Overflow either...
    – splattne
    Jan 31, 2009 at 17:12

16 Answers 16

316

for block elements:

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

for inline elements:

<span style="width:100px; word-wrap:break-word; display:inline-block;"> 
   ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC
</span>

12
  • 1
    It's supported only in IE, Safari, and FF3.1 (alpha). Jan 31, 2009 at 17:21
  • 2
    this works only in new wave of browsers - see caniuse.com/#search=word-break Jun 4, 2013 at 16:39
  • 9
    @Michael: The answer uses the "word-wrap" rule, not the "word-break" one; the former is supported as used in almost every browser used today. Where "partial support" is indicated, it appears that the "break-word" value for the "word-wrap" rule is still viable.
    – Robusto
    Feb 14, 2014 at 17:24
  • 6
    The property got renamed to overflow-wrap since in the standards, but wrod-wrap is widely implemented. Nov 20, 2014 at 22:47
  • 3
    I needed overflow-wrap: 'anywhere' Sep 23, 2021 at 3:45
111

Place zero-width spaces at the points where you want to allow breaks. The zero-width space is &#8203; in HTML. For example:

ACTGATCG&#8203;AGCTGAAG&#8203;CGCAGTGC&#8203;GATGCTTC&#8203;GATGATGC

7
  • 2
    Thanks for this solution. Was having a hard time getting something like this to work inside a table, and this solution is the only one that I found works in IE, Firefox and Chrome.
    – Farinha
    Feb 8, 2012 at 16:24
  • 1
    +1, this works better as it covers more cases, even though question was for a more particular case. Feb 9, 2012 at 19:16
  • 2
    You could alternatively use the <wbr> tag, which serves the same purpose of providing an optional line-break opportunity.
    – justisb
    Sep 3, 2013 at 20:42
  • 9
    Watch if you do this in things that might be copied and pasted.
    – alex
    Jul 29, 2014 at 0:25
  • Regex \s (whitespace), doesn't match a zero-width space. If you want to remove them, you need to explicitly write /\u200B/g or similar. See developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Apr 21, 2016 at 22:49
52

Here are some very useful answers:

How to prevent long words from breaking my div?

to save you time, this can be solved with css:

white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word; /* IE */
word-break: break-all;
5
  • 4
    +1 this because it mentions word-break:break-all; which worked for me in IE9 Jul 11, 2014 at 18:24
  • 4
    word-break: break-all; was the only one that worked in Android WebView for me.
    – Stan
    Feb 14, 2016 at 14:50
  • Thank you for word-break: break-all;! Nov 17, 2019 at 21:47
  • TIL there's a -hp- prefix!
    – i336_
    Sep 20, 2020 at 13:30
  • It appears the break-word value for word-wrap is deprecated. Instead you can use overflow-wrap: anywhere or overflow-wrap: break-word.
    – djvg
    May 16 at 7:02
20

For me this works,

<td width="170px" style="word-wrap:break-word;">
  <div style="width:140px;overflow:auto">
    LONGTEXTGOESHERELONGDIVGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESHERELONGDIVLONGTEXTLONGTEXT
  </div>
</td>

You can also use a div inside another div instead of td. I used overflow:auto, as it shows all the text both in my Opera and IE browsers.

1
  • This did not work for me. I have to move "word-wrap" property into div and remove "overflow" property. With this changes, works. May 9, 2015 at 22:24
12

I don't think you can do this with CSS. Instead, at regular 'word lengths' along the string, insert an HTML soft-hyphen:

ACTGATCG&shy;AGCTGAAG&shy;CGCAGTGC&shy;GATGCTTC&shy;GATGATGC&shy;TGACGATG

This will display a hyphen at the end of the line, where it wraps, which may or may not be what you want.

Note Safari seems to wrap the long string in a <textarea> anyway, unlike Firefox.

2
  • Wow, didn't even know about that. Neat! Jan 31, 2009 at 17:11
  • I did not know about that either. Double Neat!
    – Karl
    Mar 15, 2016 at 23:26
12

Use a CSS method to force wrap a string that has no white-spaces. Three methods:

1) Use the CSS white-space property. To cover browser inconsistencies, you have to declare it several ways. So just put your looooong string into some block level element (e.g., div, pre, p) and give that element the following css:

some_block_level_tag {
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}

2) use the force-wrap mixin from Compass.

3) I was just looking into this as well and I think might also work (but I need to test browser support more completely):

.break-me {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

Reference: wrapping content

2
  • Yes, the #3 there works in all modern browsers and even older IE6+.
    – Graeck
    Aug 27, 2013 at 17:18
  • 1
    #3 only works if there are opportunities to break by words. An overly long string does not break ( tested on Chrome 52.0.2743.82 ).
    – collapsar
    Aug 2, 2016 at 13:26
9

My way to go (when there is no appropiate way to insert special chars) via CSS:

-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

As found here: http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ with some additional research to be found there.

5

For word-wrap:break-word; to work for me, I had to make sure the display was set to block, and that the width was set on the element. In Safari, it had to have a p tag and the width had to be set in ex.

4

Use <wbr>tag:

ACTGATCG<wbr>AGCTGAAG<wbr>CGCAGTGC<wbr>GATGCTTC<wbr>GATGATGC

I think this is better than using zero-width space &#8203; which could cause problems when you copy the text.

3

If you're using PHP then the wordwrap function works well for this: http://php.net/manual/en/function.wordwrap.php

The CSS solution word-wrap: break-word; does not seem to be consistent across all browsers.

Other server-side languages have similar functions - or can be hand built.

Here's how the the PHP wordwrap function works:

$string = "ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTCGATGTAGCTAGTAGCATGTAGTGA";

$wrappedstring = wordwrap($string,50,"&lt;br&gt;",true);

This wraps the string at 50 characters with a <br> tag. The 'true' parameter forces the string to be cut.

1
  • You can mix this solution with Remy's solution to insert zero-width spaces: wordwrap ($longtext, 5, "&#8203;", true);
    – MV.
    Mar 16, 2013 at 9:04
3
<textarea style="width:100px; word-wrap:break-word;">
  place your text here
</textarea>
3

In a case where the table isnt of fixed size, below line worked for me:

style="width:110px; word-break: break-all;"
2

In case if you use Bootstrap, better case for you is use this class "text-break".

Example:

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

More informationg you should get in official Bootstrap documentation page

2

Simply:

word-break: break-word;
1

just setting width and adding float worked for me :-)

width:100%;
float:left;
3
  • It is a complete and easy answer i think that guy who posted this problem originally should use width:100%; with float:left; on element which contains that string and his problem will be resolved. then why is this answer not relevant? Feb 7, 2014 at 6:40
  • because that guy who posted this problem don't think your solution worked five years ago.
    – Pierre
    Feb 7, 2014 at 8:24
  • 2
    Yes, but this forum is not only about that guy only its about this forum and other people facing similar problem like me today can also have benefit from the same. Feb 7, 2014 at 8:51
0

Here is the code I come into using white-space: pre-wrap;

.code {
    width: 90vw;
    white-space: pre-wrap;
    font-family: inherit;
    word-break: break-word;
    overflow-wrap: break-word;
    line-break: auto;
}

I know the with value is looks odd,you should change it to value fits your needs .

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.