Wrap a long single word using CSS

css, html

Solution

Because your long word is within a `<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>

FIDDLE

Explanation:

The default value for `table-layout` is `auto` which means that the browser will decide the width of a column based on the content of the table cells.

In this case, the table layout algorithm will look at that really long word and say: 'heck, i'll need a really wide column to fit that word in'

By setting `table-layout` to `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)

Here, there is one row with one cell - so `table-layout: fixed` says: make that cell the width of the entire table! (was has `width: 100%`)

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

For more details about `table-layout` - See this article

Problem

Original source

Related problems

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