HTML/CSS问题：如何让文本在容器盒子内自动换行？

问题根源与修正要点 #

1. 修正无效CSS属性：.h6Box中的overflow: hide应为overflow: hidden，同时删除错误的position: block（position无block取值，div默认是块级元素）
2. 调整盒子模型：将box-sizing设为border-box，让内边距、边框计入元素宽度，避免宽度叠加超出容器
3. 强制文本换行：把overflow-wrap: normal改为overflow-wrap: break-word，确保长文本/连续字符在盒子边界处自动换行
4. 统一宽度设置：让h6继承父容器宽度，避免自身宽度+内边距超出父容器范围

修正后的CSS代码 #

h6 {
  color: #89CFF0;
  font-size: x-large;
  text-align: left;
  margin-top: 100px;
  padding: 50px 0 50px 2vw;
  background-color: white;
  border: 5px solid white;
  border-radius: 10px;
  box-sizing: border-box;
  overflow-wrap: break-word;
  width: 100%;
}

.h6Box {
  width: 80vw;
  overflow: hidden; 
  margin: 0 auto;
  box-sizing: border-box;
}

修正后的HTML代码 #

<div class="h6Box">
  <h6>
    这里放需要换行的长文本，比如aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  </h6>
</div>

<div class="h6Box">
  <h6>
    另一段需要换行的长文本，比如这是一段很长的中文文本，用来测试是否能在80vw宽度的盒子内自动换行而不超出屏幕范围
  </h6>
</div>

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