如何阻止网格（grid）容器内的项目在添加文本时发生宽度扩张？

• 调整网格轨道尺寸定义，替换默认的自动尺寸规则
  默认1fr的最小尺寸为auto，会跟随内容自动扩张，将轨道尺寸改为minmax(0, 1fr)即可限制最大宽度为分配的比例空间，示例配置：

  .grid5 {
    display: grid;
    /* 可根据实际布局调整列数，替换原有auto/1fr配置即可 */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  

• 给网格项目添加溢出控制规则
  显式限制网格项目的最小宽度，同时配置文本换行规则，避免长文本/长单词撑大容器：

  .grid5 > * {
    min-width: 0; /* 覆盖默认min-width: auto的扩张逻辑 */
    overflow-wrap: break-word; /* 强制长文本/长单词在容器边界换行 */
  }
  

  如果你需要单行文本溢出显示省略号，可以额外给内部<p>标签添加以下规则：

  .grid5 p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  

• 全局启用边框盒模型
  避免内边距、边框额外增加元素总宽度导致溢出：

  * {
    box-sizing: border-box;
  }
  

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