嵌套grid布局下实现span元素等尺寸与任意断词的方法咨询

解决方法 #

你需要补充几个CSS规则来实现强制断词，同时锁定所有span的尺寸：

1. 首先统一全局盒模型，避免边框、内边距导致的尺寸计算偏差
2. 覆盖grid布局默认的min-width: auto/min-height: auto规则，避免内容撑开网格容器
3. 给span添加强制断词属性，确保任意长度的文本都会在容器边缘处断行

修改后的完整CSS代码如下：

* {
  box-sizing: border-box;
}
body{
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px;
}
div{
  border: 1px solid black;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr 1fr;
  /* 禁止内容撑开grid容器 */
  min-width: 0;
  min-height: 0;
}
div > span{
  overflow-wrap: anywhere;
  /* 强制断词+锁定尺寸 */
  word-break: break-all;
  width: 100%;
  height: 100%;
}
span:nth-child(1){
  background-color: red;
}
span:nth-child(2){
  background-color: blue;
}
span:nth-child(3){
  background-color: green;
}

修改后所有span都会严格匹配你分配的网格尺寸，无论文本长度如何都会自动强制断行，所有列宽、行高都会保持统一。

内容的提问来源于stack exchange，提问作者Stairss