如何用HTML/CSS实现块元素与文本自适应浏览器窗口，解决text overflow

原代码核心问题分析 #

• .p1 设置了固定高度 height:100px，内容高度超过限制后直接溢出
• .block 设置了固定宽度 width:180px，窗口宽度小于该值时，内容无法自动换行适配
• float:left 虽能让元素宽度跟随内容，但固定高度锁死了垂直方向的扩展空间

方案1：完全自适应（元素随内容动态调整） #

移除固定宽高，让元素根据内容和窗口大小自动适配，同时添加内边距提升美观度：

.p1 {
  background-color: green;
  border-style: solid;
  float: left;
  width: auto;
  /* 移除固定高度，让元素随内容高度自适应 */
  padding: 10px; /* 避免内容紧贴边框 */
}

.block {
  display: block;
  /* 移除固定宽度，内容随窗口宽度自动换行 */
  min-width: 200px; /* 可选：限制最小宽度，避免过窄影响阅读 */
  max-width: 500px; /* 可选：限制最大宽度，避免内容过宽 */
}

方案2：保留基础高度限制 #

如果需要元素至少保持一定高度，用 min-height 替代 height，允许内容溢出时自动扩展元素高度：

.p1 {
  background-color: green;
  border-style: solid;
  float: left;
  width: auto;
  min-height: 100px; /* 最小高度100px，内容过多时自动增高 */
  padding: 10px;
}

.block {
  display: block;
  width: auto;
  max-width: 500px;
}

进阶：用Flexbox实现更灵活的响应式布局 #

如果需要多个并排块元素自适应排列，推荐使用现代Flexbox布局，比float更易维护：

main {
  display: flex;
  gap: 20px; /* 块元素之间的间距 */
  flex-wrap: wrap; /* 窗口宽度不足时自动换行 */
}

.p1 {
  background-color: green;
  border-style: solid;
  flex: 1 1 200px; /* 自适应宽度，最小宽度200px */
  padding: 10px;
}

.block {
  display: block;
}

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