How to word wrap text in HTML

Question

How can text like aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa which exceeds the width of a div  say 200px  be wrapped   I am open to any kind of solution such as CSS  jQuery  etc

User · Answer

Try this   div  display  inline

User · Answer

The only one that works across IE  Firefox  chrome  safari and opera if there are no spaces in the word  such as a long URL  is   div      width  200px        word-break  break-all      I found this to be bullet-proof

User · Answer

On bootstrap 3  make sure the white-space is not set as  nowrap    div     width  200px    word-break  break-all    white-space  normal

User · Answer

A server side solution that works for me is   message   wordwrap  message  50    lt br gt    true   where  message is a string variable containing the word chars to be broken up  50 is the max length of any given segment  and   lt br gt   is the text you want to be inserted every  50  chars

User · Answer

Another option is also using   div      white-space  pre-line      This will set all your div elements in all browsers that support CSS1  which is pretty much all common browsers as far back as IE 8

User · Answer

div          set a width     word-wrap  break-word    The  word-wrap  solution only works in IE and browsers supporting CSS3  The best cross browser solution is to use your server side language  php or whatever  to locate long strings and place inside them in regular intervals the html entity  amp  8203  This entity breaks the long words nicely  and works on all browsers  e g  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa amp  8203 aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

User · Answer

I have used bootstrap   My html code looks like      lt div class  container mt-3  style  width  100    gt     lt div class  row  gt       lt div class  col-sm-12 wrap-text  gt         lt h6 gt          text content        lt  h6 gt       lt  div gt     lt  div gt   lt  div gt    CSS   wrap-text        text-align justify

User · Answer

Try this   x000D   x000D  div  x000D    display  block  x000D    display  -webkit-box  x000D    height  20px  x000D    margin  3px auto  x000D    font-size  14px  x000D    line-height  1 4  x000D    -webkit-line-clamp  1  x000D    -webkit-box-orient  vertical  x000D    overflow  hidden  x000D    text-overflow  ellipsis  x000D    x000D   x000D   x000D    the property text-overflow  ellipsis add     and line-clamp show the number of lines

User · Answer

In HTML body try    lt table gt       lt tr gt           lt td gt               lt div style  word-wrap  break-word  width  800px  gt                  Hello world  how are you  More text here to see if it wraps after a long while of writing and it does on Firefox but I have not tested it on Chrome yet  It also works wonders if you have a medium to long paragraph  Just avoid writing in the CSS file that the words have to break-all  that s a small tip               lt  div gt           lt  td gt       lt  tr gt   lt  table gt    In CSS body try   background-size  auto   table-layout  fixed

User · Answer

lt p style  quot word-wrap  break-word  word-break  break-all  quot  gt      Adsdbjf bfsi hisfsifisfsifs shifhsifsifhis aifoweooweoweweof  lt  p gt

User · Answer

Add this CSS to the paragraph  width 420px   min-height 15px   height auto important   color  666   padding  1    font-size  14px   font-weight  normal  word-wrap  break-word   text-align  left

User · Answer

This worked for me  word-wrap  normal  word-break  break-all  white-space  normal  display  block  height  auto  margin  3px auto  line-height  1 4  -webkit-line-clamp  1  -webkit-box-orient  vertical

User · Answer

Example from CSS Tricks   div       -ms-word-break  break-all          Be VERY careful with this  breaks normal words wh erever        word-break  break-all          Non standard for webkit        word-break  break-word       -webkit-hyphens  auto      -moz-hyphens  auto      hyphens  auto        More examples here

User · Answer

Try this   div       width  200px      word-wrap  break-word

User · Answer

try   overflow-wrap  break-word

User · Answer

Cross Browser   wrap       white-space  pre-wrap     css-3            white-space  -moz-pre-wrap     Mozilla  since 1999        white-space  -pre-wrap     Opera 4-6            white-space  -o-pre-wrap     Opera 7            word-wrap  break-word     Internet Explorer 5 5

User · Answer

You can use a soft hyphen like so   aaaaaaaaaaaaaaa amp shy aaaaaaaaaaaaaaa  This will appear as  aaaaaaaaaaaaaaa- aaaaaaaaaaaaaaa   if the containing box isn t big enough  or as  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa   if it is

User · Answer

Use word-wrap break-word attribute along with required width  Mainly  put  the width in pixels  not in percentages   width  200px  word-wrap  break-word

User · Answer

you can use this CSS  p     width  min-content    min-width  100

[html] How to word wrap text in HTML?

Examples related to html

Examples related to css

Examples related to word-wrap