咨询：HTML中<p>标签文本超出屏幕的问题排查与解决

云上老周

2026-6-19

问题根源与解决方案

1. 核心布局问题：Flex容器未换行导致元素挤压

你的.section1使用了display: flex，但默认flex-wrap: nowrap会强制所有子元素（intro_text + 4个figure）挤在同一行，直接把intro_text压缩到几乎看不见。

修复代码：

.section1 {
  margin-top: 100px; /* 大幅调小原300px的上间距，避免内容过度下移 */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* 添加此行，让元素自动换行 */
}

.intro_text {
  width: 100%; /* 让文本容器占满整行，图片模块自动移到下一行 */
  margin-bottom: 20px; /* 加底部间距，和图片区拉开距离 */
}

2. 错误的文本居中方式

你给.intro_text p设置display: flex完全没必要——<p>是原生块级元素，用text-align: center就能实现文本居中，flex布局会破坏文本的正常换行逻辑。

修复代码：

.intro_text p {
  text-align: center; /* 替换原flex相关属性 */
  padding: 0 20px; /* 加左右内边距，避免文本贴屏幕边缘 */
  line-height: 1.6; /* 可选：优化行高，提升可读性 */
}

3. 额外小问题修复

HTML文档声明错误：把开头的<!DOCTYPE html> Document改成标准的<!DOCTYPE html>，避免浏览器进入怪异模式。
清理冗余文本：你的<p>标签里混进了调试分析的文字（比如“The .logo .logo_img class applies a margin-top...”），把这些多余内容删掉，保留正常的网站介绍文本。
可选：用Flex重构Header：原Header的浮动布局容易引发高度塌陷，换成Flex更稳定：

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.website_title {
  /* 移除原float和inline-block属性 */
}

.navigation ul {
  list-style: none;
  /* 移除原float:right属性 */
  display: flex;
  gap: 20px; /* 用gap替代margin，更直观控制导航项间距 */
}