如何去除换行后的多余空白？需保留max-width且文本动态

问题分析 #

你看到的红色空白区域来自两个核心原因：

1. HTML结构中p标签内部文本前后的换行、缩进产生了空白字符节点，额外占据了空间；
2. p元素默认带有上下外边距（margin），导致其整体占位远大于文本实际高度。

解决方案 #

由于你只能控制父容器.wrap，且需要保留max-width、使用单个p标签、支持动态内容，可通过以下CSS处理：

核心修复（清除默认外边距）

.wrap {
  background: red;
  color: white;
  max-width: 470px;
}
/* 通过父容器控制子元素p的样式 */
.wrap > p {
  margin: 0;
}

进阶修复（同时消除空白字符影响）

如果HTML文本前后的换行、缩进仍导致细微空白，可给父容器设置font-size: 0，再恢复p标签的字体大小：

.wrap {
  background: red;
  color: white;
  max-width: 470px;
  font-size: 0;
}
.wrap > p {
  margin: 0;
  font-size: 16px; /* 替换为你实际需要的字体大小 */
  white-space: normal; /* 确保动态文本正常换行 */
}

原理说明 #

• margin: 0：直接移除p标签默认的上下外边距，这是消除大部分红色空白的关键；
• font-size: 0：让HTML中的空白字符不再占据空间，再给p标签单独设置字体大小，既不影响文本显示，也能彻底消除空白字符带来的额外占位。

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