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>

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

2 个答案: