在CSS网格中自动换行 [英] word-wrap in a CSS grid

问题描述

表格有 table-layout：fixed ，网格的等价物是什么？

解决方案

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

< pre class =snippet-code-html lang-html prettyprint-override div style =background：＃e3e3e3; width：75％;> <表> < TR>< TD> < div style =width：200px; word-wrap：break-word;> badtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtablebadtable< / div> < / TD>< / TR> < /表> < div style =display：grid;> < div style =word-wrap：break-word; width：200px;> griddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddivgriddiv< / div> < / DIV> < / div>

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>

解决方案

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>

这篇关于在CSS网格中自动换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！