CSS固定宽度盒子如何设置高度随内容动态自适应

所需配置的CSS属性 #

直接给目标div设置以下属性即可满足需求，不需要额外编写JS逻辑：

• width: 200px：锁定盒子宽度恒定为200px。如果你的场景需要盒子在更小的视口下可以自适应缩窄、最大宽度不超过200px，把该属性替换为max-width: 200px即可。
• height: auto：这是块级div的默认属性，作用是让盒子高度完全跟随内部内容的总高度自动计算。注意不要给div设置固定height值、也不要添加max-height限制，否则内容超出设定高度后无法继续撑高盒子。
• overflow-wrap: break-word：强制连续长文本、无空格的长单词/字符串在碰到盒子宽度边界时自动换行，避免文本横向溢出盒子边界，老版本浏览器兼容写法可以同时加上word-wrap: break-word。
• （可选优化）padding: 8px; box-sizing: border-box：加内边距避免文字紧贴盒子边缘，搭配box-sizing: border-box可以保证内边距和边框不会把盒子实际宽度撑到200px以上。

完整代码示例 #

<style>
.content-box {
  width: 200px;
  height: auto;
  overflow-wrap: break-word;
  padding: 8px;
  box-sizing: border-box;
  /* 测试用边框，实际使用可删除 */
  border: 1px solid #ccc;
}
</style>

<div class="content-box">
  这里可以放入任意长度的文本内容，哪怕是很长的连续无空格字符比如aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa，也会自动换行，盒子会随着内容增多自动增高，不会出现内容溢出被截断的问题。
</div>

注意事项：不要给该div设置overflow: hidden属性，否则超出盒子高度的内容会被直接裁剪，无法完整展示。

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