响应式网站缩小屏幕时段落竖排堆叠、单词间距过大如何修复

问题1：小屏幕下段落竖向堆叠修复方案 #

导致问题的核心原因有两个：

• .contentHome2容器设置了固定width: 40%+固定margin-left: 100px，小屏幕下总宽度本身很小，扣除100px左边距后剩余可用宽度极窄，文字只能逐词换行堆叠；同时你设置了固定height: 100px，内容高度超过限制后也会挤压布局。
• .paragrahHome h2设置了white-space: nowrap，小屏幕下标题宽度超过容器宽度时不会换行，会撑歪容器布局。

修复代码如下：

/* 修改原有.contentHome2样式 */
.contentHome2 {
  margin-left: 100px;
  margin-top: 150px;
  width: 40%;
  text-align: justify;
  align-items: center;
  /* 删除固定height:100px，让高度随内容自适应 */
}

/* 新增小屏幕响应式规则 */
@media (max-width: 920px) {
  .contentHome2 {
    width: calc(100% - 40px);
    margin: 150px 20px 0 20px;
  }
  .paragrahHome h2 {
    /* 关闭强制不换行，允许标题自适应换行 */
    white-space: normal;
  }
}

问题2：段落单词间距过大修复方案 #

单词间距过大是因为.contentHome2设置了text-align: justify（两端对齐），浏览器为了让每行左右两端严格对齐，会自动拉伸单词间距凑行宽，可按需选择两种解决方案：

• 不需要两端对齐的话，直接把.contentHome2的text-align: justify改成text-align: left，单词间距会自动恢复默认值
• 需要保留两端对齐的话，给段落增加属性手动控制间距：

.contentHome2 p {
  /* 可根据视觉效果调整数值，负值缩小间距，正值放大间距 */
  word-spacing: -1px;
  /* 补充长单词自动断行属性，减少为了对齐强行拉宽间距的情况 */
  hyphens: auto;
}

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