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

User · Answer

In a case where the table isnt of fixed size  below line worked for me   style  width 110px  word-break  break-all

User · Answer

I don t think you can do this with CSS  Instead  at regular  word lengths  along the string  insert an HTML soft-hyphen   ACTGATCG amp shy AGCTGAAG amp shy CGCAGTGC amp shy GATGCTTC amp shy GATGATGC amp 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  lt textarea gt  anyway  unlike Firefox

User · Answer

Place zero-width spaces at the points where you want to allow breaks  The zero-width space is  amp  8203  in HTML  For example   ACTGATCG amp  8203 AGCTGAAG amp  8203 CGCAGTGC amp  8203 GATGCTTC amp  8203 GATGATGC

User · Answer

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

User · Answer

Use  lt wbr gt tag   ACTGATCG lt wbr gt AGCTGAAG lt wbr gt CGCAGTGC lt wbr gt GATGCTTC lt wbr gt GATGATGC   I think this is better than using zero-width space  amp  8203  which could cause problems when you copy the text

User · Answer

for block elements    x000D   x000D   lt textarea style  width 100px  word-wrap break-word   gt  x000D    ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC x000D   lt  textarea gt  x000D   x000D   x000D    for inline elements    x000D   x000D   lt span style  width 100px  word-wrap break-word  display inline-block   gt   x000D     ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC x000D   lt  span gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

User · Answer

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   amp lt br amp gt   true     This wraps the string at 50 characters with a  lt br gt  tag  The  true  parameter forces the string to be cut

User · Answer

For me this works    lt td width  170px  style  word-wrap break-word   gt     lt div style  width 140px overflow auto  gt      LONGTEXTGOESHERELONGDIVGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESHERELONGDIVLONGTEXTLONGTEXT    lt  div gt   lt  td gt    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

User · Answer

Place zero-width spaces at the points where you want to allow breaks  The zero-width space is  amp  8203  in HTML  For example   ACTGATCG amp  8203 AGCTGAAG amp  8203 CGCAGTGC amp  8203 GATGCTTC amp  8203 GATGATGC

User · Answer

for block elements    x000D   x000D   lt textarea style  width 100px  word-wrap break-word   gt  x000D    ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC x000D   lt  textarea gt  x000D   x000D   x000D    for inline elements    x000D   x000D   lt span style  width 100px  word-wrap break-word  display inline-block   gt   x000D     ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC x000D   lt  span gt  x000D   x000D   x000D

User · Answer

I don t think you can do this with CSS  Instead  at regular  word lengths  along the string  insert an HTML soft-hyphen   ACTGATCG amp shy AGCTGAAG amp shy CGCAGTGC amp shy GATGCTTC amp shy GATGATGC amp 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  lt textarea gt  anyway  unlike Firefox

User · Answer

I don t think you can do this with CSS  Instead  at regular  word lengths  along the string  insert an HTML soft-hyphen   ACTGATCG amp shy AGCTGAAG amp shy CGCAGTGC amp shy GATGCTTC amp shy GATGATGC amp 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  lt textarea gt  anyway  unlike Firefox

User · Answer

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

User · Answer

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

User · Answer

Use  lt wbr gt tag   ACTGATCG lt wbr gt AGCTGAAG lt wbr gt CGCAGTGC lt wbr gt GATGCTTC lt wbr gt GATGATGC   I think this is better than using zero-width space  amp  8203  which could cause problems when you copy the text

User · Answer

for block elements    x000D   x000D   lt textarea style  width 100px  word-wrap break-word   gt  x000D    ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC x000D   lt  textarea gt  x000D   x000D   x000D    for inline elements    x000D   x000D   lt span style  width 100px  word-wrap break-word  display inline-block   gt   x000D     ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC x000D   lt  span gt  x000D   x000D   x000D

User · Answer

lt textarea style  width 100px  word-wrap break-word   gt    place your text here  lt  textarea gt

User · Answer

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   amp lt br amp gt   true     This wraps the string at 50 characters with a  lt br gt  tag  The  true  parameter forces the string to be cut

User · Answer

In a case where the table isnt of fixed size  below line worked for me   style  width 110px  word-break  break-all

User · Answer

For me this works    lt td width  170px  style  word-wrap break-word   gt     lt div style  width 140px overflow auto  gt      LONGTEXTGOESHERELONGDIVGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESLONGTEXTGOESHERELONGDIVLONGTEXTLONGTEXT    lt  div gt   lt  td gt    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

User · Answer

just setting width and adding float worked for me  -   width 100   float left

User · Answer

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

User · Answer

lt textarea style  width 100px  word-wrap break-word   gt    place your text here  lt  textarea gt

User · Answer

for block elements    x000D   x000D   lt textarea style  width 100px  word-wrap break-word   gt  x000D    ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC x000D   lt  textarea gt  x000D   x000D   x000D    for inline elements    x000D   x000D   lt span style  width 100px  word-wrap break-word  display inline-block   gt   x000D     ACTGATCGAGCTGAAGCGCAGTGCGATGCTTCGATGATGCTGACGATGCTACGATGCGAGCATCTACGATCAGTC x000D   lt  span gt  x000D   x000D   x000D

User · Answer

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

User · Answer

I don t think you can do this with CSS  Instead  at regular  word lengths  along the string  insert an HTML soft-hyphen   ACTGATCG amp shy AGCTGAAG amp shy CGCAGTGC amp shy GATGCTTC amp shy GATGATGC amp 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  lt textarea gt  anyway  unlike Firefox

User · Answer

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

User · Answer

just setting width and adding float worked for me  -   width 100   float left

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

Examples related to html

Examples related to css

Examples related to string

Examples related to xul

Examples related to word-wrap