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

Question

我有一个没有换行符的段落文本。如果宽度超过网格容器的宽度，它应该换行。如果容器不是网格，它会起作用。

我尝试了 but not working. A similar question 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>

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

word-wrap not working in a CSS Grid item

html

css

css-grid