CSS Grid布局下文本溢出至相邻列的问题求助

你的核心问题是混合使用了CSS多列布局（column-count）和CSS Grid属性，导致布局逻辑冲突：column-count:4会自动将.columns内的内容拆分为4栏，这就会把第一个.col里的长文本强行拆分到后续列中，而你实际需要的是让4个.col各自占据独立的一列。

修改后的CSS代码 #

.columns {
  width: auto;
  display: grid; /* 改为Grid容器 */
  grid-template-columns: repeat(4, 1fr); /* 定义4等宽列 */
  gap: 10px; /* 可选：设置列间距，优化布局 */
  margin-top: 10px;
  text-align: center;
}

.col {
  overflow-wrap: break-word; /* 保留长文本换行 */
}

关键修改说明 #

1. 移除display: inline-block和column-count:4：这两个属性是多列布局的设置，和你需要的Grid列布局逻辑冲突。
2. 设置display: grid和grid-template-columns: repeat(4, 1fr)：让.columns成为Grid容器，自动将4个.col子元素分配到4个等宽列中，每个.col的内容会在自身列内正常换行，不会跨列溢出。
3. 移除grid-column和grid-row：这两个属性是Grid子项的定位属性，如果.columns本身不是某个父级Grid容器的子元素，这些属性完全无效；如果是父Grid的子项，你需要确保父容器已设置display:grid，再根据实际需求调整这两个属性。

效果验证 #

修改后，第一个.col里的长文本会在自身列内向下自动换行，不会溢出到其他列，同时四个.col会整齐排列为4列，解决截断问题。

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