word-wrap in a CSS grid

Question

word-wrap: break-word doesn't work in a grid.

For tables there is table-layout: fixed, what is the equivalent for grids?

<div style="background: #e3e3e3; width: 75%;">

 <div style="word-wrap: break-word;">
   normaldivnormaldivnormaldivnormaldivnormaldivnormaldivnormaldivnormaldivnormaldivnormaldivnormaldiv
 </div>
 
 <table>
   <tr><td style="word-wrap: break-word;">
     badtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtable
   </td></tr>
 </table>
 
 <table style="table-layout: fixed; width: 100%;">
   <tr><td style="word-wrap: break-word;">
     fixedtablefixedtablefixedtablefixedtablefixedtablefixedtablefixedtablefixedtablefixedtablefixedtablefixedtable
   </td></tr>
 </table>
 
 <div style="display: grid;">
   <div style="word-wrap: break-word;">
     griddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddiv
   </div>
 </div>

</div>

@Michael_B: Thanks, but that doesn't fix it entirely, the wrapped part is dispalyed as overflowed text over the next grid item. — user, Apr 15 '17 at 17:17
There was only one grid item in your code sample. Consider posting a more complete example: https://jsfiddle.net/j51vpsmj/ — Michael Benjamin, Apr 15 '17 at 17:19
Re-size the window. There's no overflow of the second item: https://jsfiddle.net/j51vpsmj/2/ — Michael Benjamin, Apr 15 '17 at 17:28
@Michael_B: Oh, that looks OK in Chrome, that must be a bug in Firefox. Thanks again. — user, Apr 15 '17 at 17:29
This definitely appears to be a bug in FF. As though the `min-width` override gets applied *after* the browser has completed sizing the grid item. — Michael Benjamin, Apr 15 '17 at 17:53
[Bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1356820) fixed in Firefox 54. — user, Apr 21 '17 at 17:37
Add both `word-wrap: break-word` and `overflow: hidden` to the grid item. Interestingly, in a grid item without `overflow: hidden`, the `word-wrap: break-word` does not seem to work at all. — Leo Galleguillos, Jan 17 '18 at 16:25
I had a similar problem... refer the following js fiddle it seems to solve it https://jsfiddle.net/7y2wofz0/ — Jovis Joseph, Mar 09 '18 at 05:35

score 0 · Answer 1 · answered Apr 15 '17 at 15:05

You cant use it in td but you can add another div inside td. However, you have to give some width to break the words.

    <div style="background: #e3e3e3; width: 75%;">

         <table>
           <tr><td>
            <div style="width:200px;word-wrap: break-word;"> badtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtable
            </div>
           </td></tr>
         </table>

      <div style="display: grid;">
        <div style="word-wrap: break-word;width:200px;">     griddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddiv
      </div>
      </div>

        </div>

Thank you, but I can't limit width, it has to be auto or 100%. — user, Apr 15 '17 at 15:08
I dont think you can do it otherwise since the browser has to know the width to break the word somewhere. But you can maybe use javascript at the end to set the width — abeyaz, Apr 15 '17 at 15:11

word-wrap in a CSS grid

1 Answers1

Linked