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?
In a case where the table isnt of fixed size, below line worked for me:
style="width:110px; word-break: break-all;"
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,"<br>",true);
This wraps the string at 50 characters with a <br> tag. The 'true' parameter forces the string to be cut.
<textarea style="width:100px; word-wrap:break-word;">
place your text here
</textarea>
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
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.
just setting width and adding float worked for me :-)
width:100%;
float:left;
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;
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.
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.
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.
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.
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;
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
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.
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
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.
In a case where the table isnt of fixed size, below line worked for me:
style="width:110px; word-break: break-all;"
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.
<textarea style="width:100px; word-wrap:break-word;">
place your text here
</textarea>
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.
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.
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,"<br>",true);
This wraps the string at 50 characters with a <br> tag. The 'true' parameter forces the string to be cut.
just setting width and adding float worked for me :-)
width:100%;
float:left;
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.
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.
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
Source: Stackoverflow.com