如何不改动页面对齐与div宽高适配容器内长文本？

不需要修改div预设的宽高属性，靠几个CSS属性就能实现长文本、大段落的适配，全程不会改变容器的占位尺寸，自然不会打乱页面原有的对齐效果。

方案1：自动滚动条适配（最常用，可查看全部内容） #

给目标div追加以下CSS属性即可，原有宽高声明完全保留不动：

• 核心属性overflow: auto：内容未超出容器时无任何额外效果，内容超出时自动在对应方向出现滚动条，不会强制占用布局空间。

  不要用overflow: scroll，这个属性无论内容是否溢出都会常驻滚动条轨道，不同浏览器下的滚动条宽度差异容易把内容挤歪，破坏原有对齐。

• 配套折行属性：避免长串无空格内容（比如长链接、连续数字、超长英文单词）撑出横向滚动条，追加overflow-wrap: break-word，兼容旧浏览器可以补一个word-wrap: break-word，让长内容到达容器宽度边界时自动折行。
• 可选稳定对齐属性：如果对对齐一致性要求极高，可以加scrollbar-gutter: stable，提前为滚动条预留等宽位置，不管滚动条是否显示，内容区域的宽度都不会跳变，彻底避免对齐偏移。

完整CSS示例：

.target-div {
  /* 这里是你原有的预设宽高，完全不用修改
  width: 400px;
  height: 250px;
  */
  overflow: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
  scrollbar-gutter: stable; /* 可选，防对齐跳变 */
  /* 可选：如果要加内边距/边框，加下面这行把边距算进预设宽高内，不会撑大容器 */
  box-sizing: border-box;
}

方案2：无滚动条截断适配（适合摘要类场景） #

如果不需要展示全部长文本，只想保持容器固定尺寸、超出内容做省略提示，可以用截断方案，同样不会改动容器尺寸、不影响对齐：

.target-div {
  /* 原有预设宽高保留不动 */
  overflow: hidden;
  /* 多行截断，数字对应要展示的最大行数 */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

这个方案下超出容器的内容会被自动隐藏，末尾显示省略号，没有滚动条，视觉上完全和原有布局对齐。

避坑说明 #

• 不要给容器追加fit-content类高度、最小/最大宽高属性，会改变容器原有尺寸计算逻辑，直接破坏布局对齐
• 追加内边距、边框样式时必须搭配box-sizing: border-box，否则边距会额外增加容器总尺寸，挤歪周边元素
• 普通段落文本不要随便改white-space属性，默认的normal值就会自动正常折行；如果是展示代码、预格式化文本，用white-space: pre-wrap即可，不会撑破容器。

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