如何在CSS中实现文本限制在div宽度内并自动换行

解决方案 #

你只需在现有.render-message规则中补充换行相关的CSS属性即可，修改后的完整代码如下：

.render-message {
    margin-top: 8px;
    height: 90px;
    margin-bottom: 8px;
    /* 新增以下属性实现自动换行 */
    width: 100%; /* 可替换为你需要的固定宽度，比如350px */
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

属性说明 #

• width：明确容器的宽度边界，只有确定了容器的最大可占宽度，浏览器才能判断触发换行的时机。如果不想写死宽度，也可以用max-width设置最大宽度上限，避免内容撑破布局。
• word-wrap + overflow-wrap：两套属性实现不同浏览器兼容，作用都是允许把连续的超长字符串（比如长链接、无空格的长英文单词）强制截断换行，避免这类内容超出容器宽度。
• white-space: normal：默认值就会自动换行，如果你之前有修改过white-space为nowrap之类的值要改回来；如果需要保留用户输入的原始空格、换行符，可替换为white-space: pre-wrap。

如果后续需要控制超出90px高度的内容展示逻辑，可以额外补充overflow: hidden隐藏超出内容，或者搭配-webkit-line-clamp实现多行省略效果。

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