自动换行在CSS网格项中不起作用

Question

I have a paragraph text without line breaks. It is supposed to be wrapped to a new line if the width exceeds the width of the grid container. It works if the container is not a grid.

I tried the solution from Prevent content from expanding grid items but not working. A similar question word-wrap in a CSS grid seems to be using tables which is outdated and not recommended in HMTL5

JSFiddle: https://jsfiddle.net/bvtsan8a/23/

 .container { display: grid; grid-template-rows: auto; width: 500px; background: lightsalmon; min-width: 0; min-height: 0; background:peru; } .child{ padding:30px; margin:30px; width:100%; background:indigo; } .item{ background:indianred; padding:30px; margin:30px; width:100%; } .item p { min-width: 0; min-height: 0; color:gold ; word-wrap: break-word; max-width: 100%; } 

 <div class="container"> <div class="child"> <div class="item"> <p>lolololololololololololololololololololololololololololololololololololololololololo lolololololololololololololo</p> </div> </div> </div> 

Answer 1

Use style word-breaK:break-all as mentioned below:

.item p {
  min-width: 0;
  min-height: 0;
  color:gold ;
  word-wrap: break-word;
  word-break: break-all;
  max-width: 100%;
}

JSFiddle

The reason is that word-wrap: break-word will only break the words. So if for an example, if your paragraph has multiple words and you want to break them then this style will be used. And here your text inside p itself is one word.

While word-break: break-all; is used when you want to break the word.

Answer 2

try using word-break: break-word;

 .container { display: grid; grid-template-rows: auto; width: 500px; background: lightsalmon; min-width: 0; min-height: 0; background:peru; } .child{ padding:30px; margin:30px; background:indigo; } .item{ background:indianred; padding:30px; margin:30px; } .item p { min-width: 0; min-height: 0; color:gold ; word-break: break-word; max-width: 100%; } 

 <div class="container"> <div class="child"> <div class="item"> <p> lolololololololololololololololololololololololololololololololololololololololololololololololololololololololo </p> </div> </div> </div>