自动换行在 CSS Grid 项目中不起作用答案

【问题标题】：word-wrap not working in a CSS Grid item自动换行在 CSS Grid 项目中不起作用
【发布时间】：2018-08-17 15:00:11
【问题描述】：

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

我尝试了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>

【问题讨论】：

标签： html css css-grid

【解决方案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; 用于您想断字。

【讨论】：

如果您在回答中说明为什么此属性正在解决问题而不是前一个问题，那就太好了。
所以你的意思是说word-wrap:break-word 不会破坏单个词。是这样吗？？
So if for an example, if your paragraph has multiple words and you want to break them then this style will be used. 在这种情况下不需要任何属性。它会自动工作。
对。在大多数情况下，它会自动为word-wrap 工作。但是，如果您仍然想打断单个单词，请使用word-break
:) :) 那么为什么这个小提琴只适用于word-wrap:break-wordjsfiddle.net/bvtsan8a/47

【解决方案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>

【讨论】：