css网格段落溢出答案

【问题标题】：Css grid paragraph overflowscss网格段落溢出
【发布时间】：2021-03-14 16:12:19
【问题描述】：

您好，我正在尝试调整我的 grif 文本项目，但如果文本足够大，它就会溢出网格。如何使网格项高度灵活并包含所有 div 文本

.grid{
  display     : grid;
  grid-template-columns: minmax(0, 1fr) ;
  background  : red;
  white-space : nowrap;
  }
.item{
  font-size : 30px;   
  border    : 1px green solid;
}

<div class="grid">
  <div class="item">
  
  </div>
  <div class="item">
  sdfsd
  </div>
  <div class="item">
  sdfsdf
  </div>
  <div class="item">
  sergey1sergey2sergey3sergey4sergey5sergey6sergey7sergey8sergey9sergeys10ergey11sergey12
  </div>
  <div class="item">
  sdfsf
  </div>
  <div class="item">
sdsdfsd
  </div>
  <div class="item">
  sdfsdf
  </div>
</div>

【问题讨论】：

标签： css overflow css-grid

【解决方案1】：

您可以使用 CSS 属性 word-break: break-word; 并从父容器中删除white-space: nowrap;。

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: red;
}

.item {
  font-size: 30px;
  border: 1px green solid;
  word-break: break-word;
}

<div class="grid">
  <div class="item">

  </div>
  <div class="item">
    sdfsd
  </div>
  <div class="item">
    sdfsdf
  </div>
  <div class="item">
    sergey1sergey2sergey3sergey4sergey5sergey6sergey7sergey8sergey9sergeys10ergey11sergey12
  </div>
  <div class="item">
    sdfsf
  </div>
  <div class="item">
    sdsdfsd
  </div>
  <div class="item">
    sdfsdf
  </div>
</div>

【讨论】：