如何防止CSS文本溢出并实现响应式div布局

文本溢出是两个原因共同导致的：

1. 外层容器和内容区都写死了固定高度，不同屏幕下文字排版占的高度不一样，固定高度装不下折行后的内容就会漏出去
2. 没有给文本设置折行规则，遇到长串无空格的连续字符（比如长链接、长串英文/数字）会直接撑破容器宽度
   另外你贴的JSX最后闭合标签写错了，多余的自闭合div会导致布局错乱。

直接按下面的代码调整即可，同时适配响应式需求：

• 删掉所有写死的固定高度，让容器高度跟着内容自动撑开，只保留可选的最小高度避免内容过短时容器太扁
• 给文本元素加通用折行规则，所有长内容都会自动换行不会撑破容器
• 用clamp()设置响应式字号，小屏幕自动缩小字号、减少折行占的高度，大屏幕保持最优阅读字号
• 修正盒模型计算规则，避免边框、内边距把容器撑出屏幕宽度
• 修正JSX的标签闭合错误

修正后的CSS代码 #

/* 建议加全局盒模型重置，写在公共样式最开头，一劳永逸解决宽度计算问题 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.card_main {
  border: 1px solid black;
  margin-top: 30px;
  border-radius: 5px;
  /* 删除原有的固定height: 900px */
  min-height: 300px; /* 可选，不需要可直接删掉 */
  background: #ffffff;
  width: 100%;
  padding-bottom: 20px;
}

.blog_content__text {
  width: 95%;
  /* 删除原有的固定height: 320px */
  border-bottom: 1.5px solid lightgray;
  margin: 20px auto 0;
  padding-bottom: 20px;
}

.blog_heading {
  /* 响应式字号：最小20px，随屏幕宽度缩放，最大24px */
  font-size: clamp(20px, 3vw, 24px);
  color: black;
  /* 文本强制折行规则 */
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

.blog_details {
  /* 响应式字号：最小14px，随屏幕宽度缩放，最大16px */
  font-size: clamp(14px, 2vw, 16px);
  color: black;
  opacity: 0.7;
  margin-top: 20px;
  line-height: 1.6; /* 优化行高提升可读性 */
  /* 文本强制折行规则 */
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

修正后的JSX代码 #

<div className="card_main">
  <div className="blog_content__text">
    <h1 className="blog_heading">{data.blog_title}</h1>
    <p className="blog_details">{data.blog_body}</p>
  </div>
{/* 删掉原来错误的自闭合<div/>，正确闭合外层容器 */}
</div>

如果你有特殊需求必须给内容区设置固定高度，只需要给.blog_details加上overflow-y: auto，超出高度的内容会自动出现滚动条，不会溢出到容器外部，不过从移动端体验考虑，更推荐用上面的自适应高度方案。

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