本文介绍了在CSS网格中自动换行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有 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网格中自动换行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
08-18 17:49