CSS网格中的单词换行

word-wrap: break-word在网格中不起作用。CSS网格中的单词换行

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>

来源

2017-04-15 user

添加'最小宽度：0'到网格项。 –

@Michael_B：谢谢，但是这并没有完全解决它，被包装的部分在下一个网格项目上显示为溢出文本。 – user

代码示例中只有一个网格项。考虑发布一个更完整的例子：https://jsfiddle.net/j51vpsmj/ –

你不能使用它在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>

来源

2017-04-15 15:05:17 abeyaz

谢谢，但我不能限制宽度，它必须是自动或100 ％。 – user

我不认为你可以这样做，否则，因为浏览器必须知道宽度来打破这个词的地方。但你也可以在最后使用javascript来设置宽度 – abeyaz

CSS网格中的单词换行

回答

相关问题