CSS如何修复固定宽高边框盒子内段落文本溢出重叠问题

给容器设置固定height后，容器高度不会随内部文本量自动撑开；同时浏览器默认文本换行逻辑只会在空格、半角连字符这类预设断行位置拆分内容，示例代码里的连续无空格长字符串不会触发自动换行，最终就会出现文本溢出容器边界、重叠的显示异常。

根据实际展示需求，把对应CSS属性加到.box的样式规则里即可：

• 保留200px固定高度，内容超出时显示纵向滚动条

.box{
    padding: 10px;
    width: 500px;
    height: 200px;
    border: 1px solid red;
    /* 新增属性 */
    overflow-wrap: break-word;
    overflow-y: auto;
}

overflow-wrap: break-word会强制连续无空格的长文本在到达容器宽度边界时自动断行，避免横向溢出；overflow-y: auto会在内容总高度超过200px时自动生成纵向滚动条，不会出现内容重叠。

• 不需要严格固定高度，让容器随内容自适应

.box{
    padding: 10px;
    width: 500px;
    /* 用min-height替代固定height，内容少时保持200px高，内容多时自动撑开 */
    min-height: 200px;
    border: 1px solid red;
    /* 新增长文本断行属性 */
    overflow-wrap: break-word;
}

这是常规文本容器最常用的写法，从根源上避免高度不足导致的内容溢出问题。

• 固定高度且不需要展示溢出内容

.box{
    padding: 10px;
    width: 500px;
    height: 200px;
    border: 1px solid red;
    overflow-wrap: break-word;
    /* 隐藏所有超出容器边界的内容 */
    overflow: hidden;
}

如果需要溢出内容末尾显示省略号，可配合多行文本省略的CSS规则实现。

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