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