Is there a way to word-wrap long words in a div

Question

I know Internet Explorer has a word-wrap style  but I d like to know if there is a cross-browser method of doing so to text in a div   Preferably CSS but JavaScript snippets would work ok too   edit  Yeah  referring to long strings  cheers folks

User · Answer

Aaron Bennet s solution is working perfectly for me  but i had to remove this line from his code --  white-space  -pre-wrap  beacause it was giving an error  so the final working code is the following    wordwrap       white-space  pre-wrap          CSS3          white-space  -moz-pre-wrap     Firefox          white-space  -o-pre-wrap       Opera 7           word-wrap  break-word          IE        thank you very much

User · Answer

As david mentions  DIVs do wrap words by default   If you are referring to really long strings of text without spaces  what I do is process the string server-side and insert empty spans   thisIsAreallyLongStringThatIWantTo lt span gt  lt  span gt BreakToFitInsideAGivenSpace   It s not exact as there are issues with font-sizing and such  The span option works if the container is variable in size  If it s a fixed width container  you could just go ahead and insert line breaks

User · Answer

You can try specifying a width for the div  whether it be in pixels  percentages or ems  and at that point the div will remain that width and the text will wrap automatically then within the div

User · Answer

Reading the original comment  rutherford is looking for a cross-browser way to wrap unbroken text  inferred by his use of word-wrap for IE  designed to break unbroken strings       Source  http   snipplr com view 10979 css-cross-browser-word-wrap     wordwrap       white-space  pre-wrap          CSS3          white-space  -moz-pre-wrap     Firefox           white-space  -pre-wrap         Opera  lt 7          white-space  -o-pre-wrap       Opera 7           word-wrap  break-word          IE        I ve used this class for a bit now  and works like a charm    note  I ve only tested in FireFox and IE

User · Answer

white-space  pre-wrap   quirksmode org css whitespace html

User · Answer

Most of the previous answer didn t work for me in Firefox 38 0 5   This did      lt div style  padding  3px  width  130px  word-break  break-all  word-wrap  break-word   gt         Content goes here  lt  div gt    Documentation    word-break word-wrap

[css] Is there a way to word-wrap long words in a div?

Examples related to css

Examples related to html

Examples related to word-wrap