CSS网格中的自动换行

Question

word-wrap: break-word不能在网格中工作。

For tables有table-layout: fixed，网格的等价物是什么？

​

<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>

​

Answer 1

你不能在td中使用它，但你可以在td中添加另一个div。然而，你必须给出一些宽度来打破单词。

​

    <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>

​