Css 网格段落溢出

Question

您好，我正在尝试调整我的文本 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>

Answer 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>

Css 网格段落溢出

Css grid paragraph overflows

css

overflow

css-grid