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

Question

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?

Ironically the string doesn't break in Stack Overflow either... — splattne, Jan 31 '09 at 17:12

score 320 · Accepted Answer · edited Jun 17 '18 at 17:22

320

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>

edited Jun 17 '18 at 17:22

Mahozad

18,032
13
118
133

answered Jan 31 '09 at 16:53

heeen

4,736
2
21
24

1

It's supported only in IE, Safari, and FF3.1 (alpha). – Adam Bellaire Jan 31 '09 at 17:21
just tested your solution with the last FF . Worked fine. – Pierre Sep 07 '09 at 06:15
2

this works only in new wave of browsers - see http://caniuse.com/#search=word-break – Michal Bernhard Jun 04 '13 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](http://caniuse.com/#search=word-wrap) 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 '14 at 17:24
I don't think this solution works any longer. At least not in current Chrome. – Matt Smith Aug 26 '14 at 14:50
6

The property got renamed to `overflow-wrap` since in the standards, but `wrod-wrap` is widely implemented. – Ciro Santilli OurBigBook.com Nov 20 '14 at 22:47
It doesn't work. It breaks words in the middle of the word. – Green Jun 02 '17 at 11:40
1

Also works with "display: table-cell", was necesary in my case – César León Jul 04 '18 at 15:55
In case a predefined width is not desired, using ` ` works too. (Firefox 58) – tbrlpld Apr 16 '19 at 16:10
I needed `word-break: break-all` for this as mentioned in [emiks answer](https://stackoverflow.com/a/18484181/1318694) – Matt Feb 17 '20 at 22:16
3

I needed `overflow-wrap: 'anywhere'` – cyclingLinguist Sep 23 '21 at 03:45
now... the most relevant comments all refer to `overflow-wrap`... i upvoted each comment to try an draw more attention to them... `overflow-wrap:anywhere` did it for me – aequalsb Feb 12 '22 at 13:53

score 111 · Answer 2 · answered Apr 18 '09 at 19:33

111

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

ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGC

answered Apr 18 '09 at 19:33

Remy Blank

4,236
2
23
24

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 08 '12 at 16:24
1

+1, this works better as it covers more cases, even though question was for a more particular case. – montrealist Feb 09 '12 at 19:16
2

You could alternatively use the `` tag, which serves the same purpose of providing an optional line-break opportunity. – justisb Sep 03 '13 at 20:42
9

Watch if you do this in things that might be copied and pasted. – alex Jul 29 '14 at 00: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 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#character-classes – Neal Ehardt Apr 21 '16 at 22:49
Note: Some of us prefer to spell it in hex, as ``, so that we can find the Unicode reference (code U+200B) more easily. – David R Tribble Feb 03 '17 at 00:17
This is very useful for wrapping inside HTML emails (if you are able to process text before rendering templates) without the headache of worrying about rendering logic in different email clients – Yevgen Fesenko Sep 03 '19 at 14:32

score 52 · Answer 3 · edited May 23 '17 at 10:31

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;

edited May 23 '17 at 10:31

Community

1
1

answered Aug 28 '13 at 09:30

emik

903
12
11

4

+1 this because it mentions word-break:break-all; which worked for me in IE9 – Nick Benedict Jul 11 '14 at 18:24
4

`word-break: break-all;` was the only one that worked in Android WebView for me. – Stan Feb 14 '16 at 14:50
Thank you for `word-break: break-all;`! – Lonnie Best Nov 17 '19 at 21:47
TIL there's a `-hp-` prefix! – i336_ Sep 20 '20 at 13:30
It appears the `break-word` value for `word-wrap` is [deprecated](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#values). Instead you can use [`overflow-wrap: anywhere`](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap) or `overflow-wrap: break-word`. – djvg May 16 '23 at 07:02

score 20 · Answer 4 · edited Jan 29 '13 at 18:38

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.

This did not work for me. I have to move "word-wrap" property into div and remove "overflow" property. With this changes, works. — danigonlinea, May 09 '15 at 22:24

Graeck · Answer 5 · 2013-02-14T01:38:13.080

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

Yes, the #3 there works in all modern browsers and even older IE6+. — Graeck, Aug 27 '13 at 17:18
#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 02 '16 at 13:26

Peter Hilton · Answer 6 · 2009-01-31T17:13:50.337

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.

edited Jan 31 '09 at 17:13

answered Jan 31 '09 at 17:08

Peter Hilton

17,211
6
50
75

Wow, didn't even know about that. Neat! – Daniel Schaffer Jan 31 '09 at 17:11
I did not know about that either. Double Neat! – Karl Mar 15 '16 at 23:26

score 9 · Answer 7 · answered Sep 16 '14 at 13:35

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.

score 5 · Answer 8 · edited Dec 12 '13 at 20:20

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.

edited Dec 12 '13 at 20:20

Zombo

1
62
391
407

answered Dec 07 '10 at 20:09

innerurge

59
1
1

score 4 · Answer 9 · answered Sep 05 '17 at 07:14

4

Use <wbr>tag:

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

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

answered Sep 05 '17 at 07:14

warvariuc

57,116
41
173
227

score 3 · Answer 10 · answered Aug 12 '15 at 06:50

3

<textarea style="width:100px; word-wrap:break-word;">
  place your text here
</textarea>

answered Aug 12 '15 at 06:50

score 3 · Answer 11 · answered Oct 31 '16 at 17:10

3

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

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

answered Oct 31 '16 at 17:10

rakpan

2,773
4
26
36

score 3 · Answer 12 · edited Jul 29 '14 at 00:46

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.

You can mix this solution with Remy's solution to insert zero-width spaces: wordwrap ($longtext, 5, "", true); — MV., Mar 16 '13 at 09:04

score 2 · Answer 13 · answered Mar 02 '21 at 18:46

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

score 2 · Answer 14 · answered Dec 07 '21 at 19:01

2

Simply:

word-break: break-word;

answered Dec 07 '21 at 19:01

slothstronaut

921
1
13
15

score 1 · Answer 15 · edited Oct 19 '15 at 13:09

1

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

width:100%;
float:left;

edited Oct 19 '15 at 13:09

Herr_Schwabullek

770
10
20

answered Feb 07 '14 at 06:18

TechBrush.Org

29
1
1
5

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? – TechBrush.Org Feb 07 '14 at 06:40
because that guy who posted this problem don't think your solution worked five years ago. – Pierre Feb 07 '14 at 08: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. – TechBrush.Org Feb 07 '14 at 08:51

Salem · Answer 16 · 2023-06-29T13:22:19.477

1

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 width value is looks odd, you should change it to value fits your needs .

edited Jun 29 '23 at 13:22

answered Oct 13 '21 at 16:14

Salem

654
7
24

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

16 Answers16

Linked

Related