自动换行不在CSS Grid项目中工作

Question

我有一个段落文本没有换行符。如果宽度超过网格容器的宽度，则应该将其换行到新行。如果容器不是网格，它可以工作。

我尝试了Prevent content from expanding grid items的解决方案，但没有工作。一个类似的问题word-wrap in a CSS grid似乎使用过时的表，而不是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

使用如下所述的风格word-breaK:break-all：

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

JSFiddle

原因是word-wrap: break-word只会打破这些话。因此，举例来说，如果你的段落有多个单词并且你想要破坏它们，那么将使用这种样式。在这里，你在p内部的文字就是一个字。

当你想打破这个词时使用word-break: break-all;。

Answer 2

尝试使用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>