Redactor容器内多层blockquote文本溢出适配方案求助

要解决多层<blockquote>导致文本溢出容器的问题，可通过调整容器和blockquote的CSS样式实现文本自动适配换行，具体修改如下：

1. 调整容器样式 #

修改.redactor容器的CSS，添加横向溢出隐藏和强制换行属性：

div .redactor {
  position: relative;
  outline: none;
  box-shadow: none !important;
  padding: 15px !important;
  margin: 0 !important;
  overflow-x: hidden; /* 隐藏横向溢出，不显示滚动条 */
  white-space: normal;
  word-wrap: break-word; /* 强制长文本自动换行 */
}

2. 重写blockquote样式 #

将blockquote的缩进方式从margin-left改为padding-left，避免多层嵌套时margin累加导致宽度溢出：

div .redactor blockquote {
  margin: 0 !important; /* 清除默认margin */
  padding-left: 20px !important; /* 用padding实现缩进，可按需调整数值 */
  border-left: 2px solid #ddd; /* 可选：添加左侧边框增强引用视觉区分，不需要可删除 */
  box-sizing: border-box; /* 确保padding不会增加元素总宽度 */
}

原理说明 #

• overflow-x: hidden：强制隐藏容器横向溢出的内容，彻底避免横向滚动条出现。
• 替换margin-left为padding-left+box-sizing: border-box：多层嵌套时，padding会在元素内部累加缩进，而不会增加元素的总宽度，确保blockquote始终在容器范围内。
• word-wrap: break-word：即使文本中没有空格（如长单词、连续字符），也会自动换行适配容器宽度。

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