How to wrap text using CSS

Question

lt td gt gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg lt  td gt    How do I get text like this to wrap in CSS

User · Answer

This will work everywhere    lt body gt     lt table style  table-layout fixed   gt     lt tr gt       lt td gt  lt div style  word-wrap  break-word  width  100px   gt  gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg lt  div gt  lt  td gt     lt  tr gt     lt  table gt    lt  body gt

User · Answer

If you type   AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG  this will produce   AARRRRRRRRRRRRRRRRRRRR RRGGGGGGGGGGGGGGGGGGGG G   I have taken my example from a couple different websites on google   I have tested this on ff 5 0  IE 8 0  and Chrome 10   It works on all of them    wrapword       white-space  -moz-pre-wrap  important      Mozilla  since 1999        white-space  -pre-wrap          Opera 4-6        white-space  -o-pre-wrap        Opera 7        white-space  pre-wrap           css-3        word-wrap  break-word           Internet Explorer 5 5         white-space  -webkit-pre-wrap     Newer versions of Chrome Safari       word-break  break-all      white-space  normal      lt table style  table-layout fixed  width 400px  gt       lt tr gt           lt td class  wrapword  gt  lt  td gt       lt  tr gt   lt  table gt

User · Answer

The better option if you cannot control user input  it is to establish the css property  overflow hidden  so if the string is superior to the width  it will not deform the design   Edited   I like the answer   word-wrap  break-word   and for those browsers that do not support it  for example  IE6 or IE7  I would use my solution

User · Answer

Try doing this  Works for IE8  FF3 6  Chrome   lt body gt     lt table gt       lt tr gt         lt td gt           lt div style  word-wrap  break-word  width  100px  gt gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg lt  div gt         lt  td gt       lt  tr gt     lt  table gt   lt  body gt

User · Answer

With text-wrap  browser support is relatively weak  as you might expect from from a draft spec    You are better off taking steps to ensure the data doesn t have long strings of non-white-space

[css] How to wrap text using CSS?

Examples related to css

Examples related to word-wrap