评论内容及textarea文本移动端溢出容器，如何实现自动换行？

1. 调整评论内容样式 #

原有word-wrap属性覆盖场景有限，部分移动端Webkit内核浏览器不会对连续长字符、无空格内容触发换行，修改.user-comment-content的CSS规则如下：

.user-comment-content{
  grid-row: 2/3;
  grid-column: 2/3;
  margin: -1.2rem 1rem 1rem 0rem;
  font-size: 1.4rem;
  /* 新增换行相关规则 */
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  width: 100%;
  box-sizing: border-box;
}

各新增属性作用：

• overflow-wrap: break-word：W3C标准换行属性，替代老旧的word-wrap，兼容性更广
• word-break: break-word：强制对连续长字符（长链接、无空格英文/数字串）进行拆分换行
• white-space: pre-wrap：保留用户输入的原始换行，同时自动按照容器宽度折行
• width: 100% + box-sizing: border-box：显式限制内容宽度不超过父容器，内边距、边框都计算在宽度范围内，避免额外宽度导致溢出

2. 检查父容器与全局适配 #

• 给.comment元素增加grid列配置，确保评论内容区自动占满剩余可用宽度：

.comment {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px; /* 根据你的布局调整间距 */
}

• 确认HTML头部已添加移动端适配的viewport元标签，缺失该标签会导致移动端默认按桌面端宽度渲染页面，必然出现横向滚动：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. 兜底处理 #

如果仍有特殊场景导致溢出，给评论外层容器增加横向溢出隐藏，避免出现页面滚动条：

.comment-section {
  overflow-x: hidden;
}

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