CSS Grid布局中评论内容溢出容器如何实现自动换行？

API 探路者

2026-9-30

修复方案

1. 核心问题说明

你当前的代码有三个导致溢出的原因：

.comment 容器设置了固定行高 grid-template-rows: 4.5rem，高度被写死无法随内容自动撑开
评论内容没有配置自动换行规则，长文本、连续英文字符/数字会直接横向溢出容器
.comment 的列宽固定为两个6rem，评论内容区域宽度不足也会加剧溢出问题

2. 修改后的CSS代码

.comment-section-grid{
    display: grid;
    grid-template-rows: 1fr 1fr ;
    grid-template-columns: 1fr 1fr;
}

.comment {
    margin: 2rem 0;
    display: grid;
    /* 第一列放头像固定6rem，第二列自适应占满剩余宽度 */
    grid-template-columns: 6rem 1fr;
    /* 替换固定行高，最小高度为4.5rem，内容过多时自动撑开 */
    grid-auto-rows: minmax(4.5rem, auto);
    border: 2px solid #a8a7a7;
    border-radius: 2rem;
    /* 增加内边距避免内容贴边 */
    padding: 1rem;
    overflow: hidden;
}

/* 补充用户名布局规则，和头像同水平行展示 */
.comment-user {
    grid-column: 2/3;
    grid-row: 1/2;
    margin: 0 0 0.5rem 0;
    font-weight: bold;
}

.user-comment-content{
   grid-row: 2/3;
   grid-column: 2/3;
   margin: 0;
   /* 核心自动换行规则 */
   word-wrap: break-word;
   word-break: break-all;
   /* 可选配置：不想让评论框无限拉长的话开启，超出高度后内部出现滚动条
   max-height: 10rem;
   overflow-y: auto; */
}