Wrap a long single word using CSS

Question

I tried to wrap one word containing about 500 characters in a div.

<table><tr><td style="width: 100px;" colspan=""><div class="wordwrap"><p> dwhjifuidfinrnvfrvgjsrfjoejwofjjfpijqfpqejospjfcjcdefjipwejpfjespfjweokpwoefweeeepWSPgjwrqeo[fj[ejwo[jfqjfo[cfj[e[awfjw[fw[ofj[sejfpjwerpjfpwrjgjrjghyhefdjsjflkfasjgfiosdjfgsfgsdfiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiigrwewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewettttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttu </p></div> </td></tr></table> 

with this solution provided by In Is there a way to verbally translate long words into a div?

 <style type="text/css"> .wordwrap { white-space: pre-wrap; /* CSS3 */ white-space: -moz-pre-wrap; /* Firefox */ white-space: -pre-wrap; /* Opera <7 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* IE */ } </style> 

But it does not work. After that, is there a way to wrap the html text when using "all one word"? . What could be the problem?

Answer 1

Since your long word is within the <table> - you need to add table-layout: fixed;

 table { width: 100%; word-wrap:break-word; table-layout: fixed; } 

 table { width: 100%; word-wrap:break-word; table-layout: fixed; } 

 <table ><tr><td style="width: 100px;" colspan=""><div class="wordwrap"><p> dwhjifuidfinrnvfrvgjsrfjoejwofjjfpijqfpqejospjfcjcdefjipwejpfjespfjweokpwoefweeeepWSPgjwrqeo[fj[ejwo[jfqjfo[cfj[e[awfjw[fw[ofj[sejfpjwerpjfpwrjgjrjghyhefdjsjflkfasjgfiosdjfgsfgsdfiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiigrwewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewettttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttu </p></div> </td></tr></table> cfj [e [awfjw [fw [ofj [sejfpjwerpjfpwrjgjrjghyhefdjsjflkfasjgfiosdjfgsfgsdfiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiigrwewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewettttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttu <table ><tr><td style="width: 100px;" colspan=""><div class="wordwrap"><p> dwhjifuidfinrnvfrvgjsrfjoejwofjjfpijqfpqejospjfcjcdefjipwejpfjespfjweokpwoefweeeepWSPgjwrqeo[fj[ejwo[jfqjfo[cfj[e[awfjw[fw[ofj[sejfpjwerpjfpwrjgjrjghyhefdjsjflkfasjgfiosdjfgsfgsdfiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiigrwewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewettttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttu </p></div> </td></tr></table> 

Fiddle

Explanation:

The default value for table-layout is auto , which means that the browser will determine the column width based on the contents of the table cells.

In this case, the table layout algorithm will look at this very long word and say: "Hi, I need a really wide column to match this word in

By setting table-layout - fixed - the browser determines the width of the columns based on the width of the cells in the first row without taking into account the amount of content present in other rows. (See MDN )

There is one row with one cell - so table-layout: fixed says: make this cell the width of the whole table! (was width: 100% )

NB: For the effect of table-layout: fixed take effect, you must set the width of the table (with a value other than auto )

For more on table-layout , see this article.

Answer 2

word-wrap: break-word should give you the result after you.

Answer 3

There is a property in css:

 .selector { word-wrap: normal|break-word; } 

Answer 4

You also have an HTML5 <wbr> : http://www.quackit.com/html_5/tags/html_wbr_tag.cfm , which allows you to specify suitable breakpoints

 dwhjifuidfinrnvfrvgjsrfjoejwofjjfpijqfpqej<wbr>ospjfcjcdefjipwejpfjespfjweokpwoefweeeepWSPgjwrqeo 

This may not be what you want, but it’s worth playing with

Answer 5

Try adding a few overflow - hidden , scroll , auto ...

  .wordwrap { white-space: pre-wrap; /* CSS3 */ white-space: -moz-pre-wrap; /* Firefox */ white-space: -pre-wrap; /* Opera <7 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* IE */ overflow:hidden; } 

Also your next answer contains oveflow: scroll;

Answer 6

Here is the code you should use:

 .wrapword { width: 200px; -ms-word-break: break-all; word-break: break-all; white-space: pre-wrap } 

 <div class="wrapword"> dswfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfugfug </div> 

Answer 7

to use word break

It can be used to clear your problem easily.

Answer 8

Try it. It worked for me.

 <html> <head></head> <body> <div style="width:200px;"> <span style="width:100%;table-layout:fixed;word-wrap:break-word;display:inline-table"> hadfskldfjsdjlfjlsdkflkdsfsdrfsdfsdfsfsdfsdfsdfsdfsdfsd </span> <div> </body> </html>