时间戳

首页 > 解决方案 > css网格段落溢出

css - css网格段落溢出

问题描述

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

jsfiddle 演示

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

标签： cssoverflowcss-grid

解决方案

您可以使用 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>

推荐阅读