How can I force a long string without any blank to be wrapped?
Solution 1
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>
Solution 2
Place zero-width spaces at the points where you want to allow breaks. The zero-width space is ​
in HTML. For example:
ACTGATCG​AGCTGAAG​CGCAGTGC​GATGCTTC​GATGATGC
Solution 3
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;
Solution 4
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.
Solution 5
I don't think you can do this with CSS. Instead, at regular 'word lengths' along the string, insert an HTML soft-hyphen:
ACTGATCG­AGCTGAAG­CGCAGTGC­GATGCTTC­GATGATGC­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.
Related videos on Youtube
LabRat01010
Bioinformatician Virology Genetics Biology Science Science2.0 Web2.0 Bioinformatics Genotyping Wikipedia
Updated on December 08, 2021Comments
-
LabRat01010 over 2 years
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 axul:textbox
?-
splattne over 15 yearsIronically the string doesn't break in Stack Overflow either...
-
-
Daniel Schaffer over 15 yearsWow, didn't even know about that. Neat!
-
Adam Bellaire over 15 yearsIt's supported only in IE, Safari, and FF3.1 (alpha).
-
LabRat01010 over 14 yearsjust tested your solution with the last FF . Worked fine.
-
Farinha about 12 yearsThanks 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.
-
montrealist about 12 years+1, this works better as it covers more cases, even though question was for a more particular case.
-
MV. about 11 yearsYou can mix this solution with Remy's solution to insert zero-width spaces: wordwrap ($longtext, 5, "​", true);
-
Asgher almost 11 yearsthis works only in new wave of browsers - see caniuse.com/#search=word-break
-
Graeck over 10 yearsYes, the #3 there works in all modern browsers and even older IE6+.
-
justisb over 10 yearsYou could alternatively use the
<wbr>
tag, which serves the same purpose of providing an optional line-break opportunity. -
TechBrush.Org about 10 yearsIt 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?
-
LabRat01010 about 10 yearsbecause that guy who posted this problem don't think your solution worked five years ago.
-
TechBrush.Org about 10 yearsYes, 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.
-
Robusto about 10 years@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.
-
Nick Benedict almost 10 years+1 this because it mentions word-break:break-all; which worked for me in IE9
-
user3167101 almost 10 yearsWatch if you do this in things that might be copied and pasted.
-
Matt Smith over 9 yearsI don't think this solution works any longer. At least not in current Chrome.
-
Ciro Santilli OurBigBook.com over 9 yearsThe property got renamed to
overflow-wrap
since in the standards, butwrod-wrap
is widely implemented. -
danigonlinea almost 9 yearsThis did not work for me. I have to move "word-wrap" property into div and remove "overflow" property. With this changes, works.
-
Stan about 8 years
word-break: break-all;
was the only one that worked in Android WebView for me. -
Karl about 8 yearsI did not know about that either. Double Neat!
-
Neal Ehardt about 8 yearsRegex
\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/… -
collapsar almost 8 years#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 ).
-
David R Tribble about 7 yearsNote: Some of us prefer to spell it in hex, as
​
, so that we can find the Unicode reference (code U+200B) more easily. -
Green almost 7 yearsIt doesn't work. It breaks words in the middle of the word.
-
César León almost 6 yearsAlso works with "display: table-cell", was necesary in my case
-
tbrlpld about 5 yearsIn case a predefined width is not desired, using
<span style="overflow-x:hidden; word-wrap:break-word;">
works too. (Firefox 58) -
Yevgen Fesenko over 4 yearsThis 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
-
Lonnie Best over 4 yearsThank you for
word-break: break-all;
! -
Matt about 4 yearsI needed
word-break: break-all
for this as mentioned in emiks answer -
i336_ over 3 yearsTIL there's a
-hp-
prefix! -
cyclingLinguist over 2 yearsI needed
overflow-wrap: 'anywhere'
-
aequalsb about 2 yearsnow... 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