word-wrap in a CSS grid [duplicate]

问题

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>

回答1:

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>

来源：https://stackoverflow.com/questions/43427537/word-wrap-in-a-css-grid

标签

html

css

word-wrap

css-grid