CSS网格中的自动换行

时间:2017-04-15 14:57:51

标签: html css word-wrap css-grid

word-wrap: break-word无法在网格中使用。

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

1 个答案:

答案 0 :(得分:0)

你不能在td中使用它,但你可以在td中添加另一个div。但是,你必须给一些宽度来打破这些词。

&#13;
&#13;
    <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>
&#13;
&#13;
&#13;