如何解决文本在div容器内溢出的适配问题？

你的问题出在样式冲突、盒模型设置缺失以及断行属性覆盖不足上，以下是具体修复方案：

问题核心原因 #

1. 样式优先级冲突：HTML内联样式的width:200px优先级高于外部CSS的width:300px，导致实际生效宽度为200px，但外部CSS的padding:50px和border:15px会额外占用空间，容器可容纳文本的实际宽度远小于预期。
2. 盒模型未配置：默认盒模型下，width不包含padding和border，进一步压缩了文本可用空间。
3. 断行属性覆盖不全：仅用word-wrap: break-word对无空格的连续长文本（如一串数字、无分隔符的英文）支持有限。

修复步骤 #

1. 统一宽度并启用border-box盒模型：让width包含padding和border，避免额外空间挤占文本区域，同时统一内联与外部CSS的宽度设置，消除冲突。
2. 增强断行规则：补充标准断行属性，确保各类文本场景下都能自动适配容器宽度。
3. 清理冗余样式：移除重复定义的属性，减少样式冲突概率。

修改后的代码示例 #

CSS 代码 #

#total {
  border-radius: 5px;
  background-color: lightgrey;
  width: 200px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
  word-wrap: break-word;
  overflow-wrap: break-word; /* word-wrap的标准别名，兼容性更好 */
  word-break: break-word; /* 强制长文本断行 */
  box-sizing: border-box; /* 关键：让padding和border纳入width计算 */
  position: absolute;
  right: 400px;
  height: 200px;
  font-size: 10px;
}

HTML 代码 #

<p id="total"></p>

若需保留部分内联样式，至少要确保核心属性生效：

<p id="total" style="position: absolute; right: 400px; width:200px; height: 200px; font-size: 10px; box-sizing: border-box; overflow-wrap: break-word;"></p>

额外提示 #

• 若遇到极端场景（如无空格的超长字符串），可替换word-break: break-word为word-break: break-all，强制在任意字符处断行，但可能破坏单词完整性，按需选择。
• 绝对定位元素的父容器建议设置position: relative，避免布局脱离预期上下文。

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