CSS实现dash元素自适应文本高度 内容适配wrapper响应式布局

核心修复点 #

• 移除<dash>元素的固定高度硬编码，通过流式布局让容器高度自动跟随内部文本内容撑开，适配不同屏幕下的文本换行高度
• 替换所有固定px宽度设置，改用相对宽度+盒模型约束，让文本内容自动适配父容器宽度，彻底解决水平溢出问题
• 修正原HTML结构的标签闭合错误、类名缺失问题

修复后完整代码 #

CSS 样式 #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.main {
  padding: 16px;
  width: 100%;
}
.main .circle{
  border-radius: 50%;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7em;
  color: white;
  flex-shrink: 0;
  border: 2px solid black;
  vertical-align: middle;
}
.main .one{ 
  background: #BDB3FF;
}
.main .two{
  background: #6F42C1;
}
.main .three{
  background:#413687;
}
.main .wrapper{
  border: 2px solid black;
  width: 100%;
  max-width: 100%;
  padding: 20px;
}
.main .dash {
  --s:15px; /* 控制虚线间隔 */
  border: none;
  position: relative;
  margin-left: 25px;
  width: 6px;
  min-height: 80px;
  height: auto;
  padding: 12px 0 12px 30px;
  background: 
  radial-gradient(circle closest-side,var(--dash-color) 98%,transparent) 0 0/100% var(--s),
  linear-gradient(var(--dash-color) 50%, transparent 0) 0 calc(var(--s)/2)/100% calc(2*var(--s));
}
.main .dash_one{
  --dash-color: #BDB3FF;
}
.main .dash_two{
  --dash-color: #6F42C1;
}
.main .dash_three{
  --dash-color: #413687;
}
.main .subtext{
  width: calc(100vw - 160px);
  max-width: 100%;
  border: 2px solid black;
  display: block;
  font-size: 1.2em;
  line-height: 1.6;
  padding: 12px;
  word-break: break-word;
}
.main .text{
  color: black;
  display: inline-block;
  margin-left: 20px;
  vertical-align: middle;
  font-size: 1.4em;
  font-weight: 600;
  max-width: calc(100% - 80px);
  word-break: break-word;
}
/* 移动端适配 */
@media (max-width: 768px) {
  .main .subtext {
    width: calc(100vw - 120px);
    font-size: 1em;
  }
  .main .text {
    font-size: 1.2em;
    max-width: calc(100% - 70px);
  }
}

HTML 结构 #

<div class="main">
  <div class="wrapper">
    <div class="circle one">1 <span class="text">发布你的问题</span></div>
    <div class="dash dash_one">
      <span class="subtext">上传你的作业/问题，附上参考资料、特定规则或要求，选定截止时间后提交即可获取作业帮助
      </span>
    </div>
    <div class="circle two">2 <span class="text">付费获取作业帮助</span></div>
    <div class="dash dash_two">
      <span class="subtext">我们收到请求后会通过邮件/WhatsApp联系你，告知作业帮助的报价，完成支付后我们会安排专业人员处理你的作业
      </span>
    </div>
    <div class="circle three">3 <span class="text">获取作业解答</span></div>
    <div class="dash dash_three">
      <span class="subtext">专家完成作业后我们会第一时间将完整解答发送给你，你可以核对内容，有调整需求可以随时联系对接人员
      </span>
    </div> 
  </div>
</div>

实现说明 #

• 所有容器取消固定宽高，通过padding、margin控制间距，虚线容器高度由内部文本自动撑开，不需要手动设置固定值
• 文本容器通过calc()结合视口单位、max-width:100%、word-break:break-word实现宽度自适应，在任意尺寸设备下都不会出现水平溢出
• 新增媒体查询针对移动端做字号、宽度微调，保证小屏设备可读性
• 用CSS变量统一控制虚线颜色，减少重复代码

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