如何在CSS中裁剪border实现的进度条线条？含文本布局问题

我做了一个进度条，想要让顶部的线条刚好从左侧圆点开始，到右侧圆点结束，试了调整边距的方法没搞定。另外圆点下面的文本太宽，挤在一起，能不能让文本在窄范围内换行，保持各自的间距？

• 当前效果：顶部线条从容器两端延伸，超出了左右圆点；下方文本宽度铺满，彼此间距小。
• 期望效果：线条只在相邻圆点之间显示，起止点对齐圆点；每个文本块限制在对应圆点下方的窄区域内，自动换行，保持均匀间距。

原代码 #

CSS

.wraper {
  padding: 50px;
  text-align: center;
  font-family: sans-serif;
  max-width: 1300px;
  margin: 10px auto;
}

.container_wraper {
  border-top: 2px solid #293ff9;
  display: flex;
  list-style: none;
  padding: 0;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
}

.link {
  position: relative;
  margin-top: 10px;
  width: 100%;
}

.link a {
  font-weight: bold;
  font-size: 16px;
  font-family: "poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #293ff9;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
}

.link::after {
  content: "";
  width: 12px;
  height: 12px;
  background: #fff;
  position: absolute;
  border-radius: 10px;
  top: -18px;
  left: 50%;
  transform: translatex(-50%);
  border: 2px solid blue;
}

.link:hover::after {
  background: #293ff9;
}

.lead {
  display: flex;
  list-style: none;
  text-align: center;
  margin: 0 1px 0 1px;
  padding: 0;
  overflow-wrap: break-word;
  font-weight: bold;
  font-size: 10px;
  margin-top: 3px;
  font: sans-serif;
  letter-spacing: 1px;
  font-weight: 400;
  text-decoration: none;
  line-height: 1px;
}

HTML

<div class="wraper">

  <ul class="container_wraper">
    <li class="link"><a href="">Materiały</a></li>
    <li class="link"><a href="">Algorytmy</a></li>
    <li class="link active"><a href="">Szkolenia</a></li>
  </ul>
  <div class="lead">
    <p class="lead1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit eligendi non id doloremque aliquid provident nobis consectetur recus.!</p>
    <p class="lead2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius vel perferendis repellat laborum iure laudantium ex ipsa repellendus dignissimos iusto.</p>
    <p class="lead3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae officiis quae mollitia totam quis cumque a iste sapiente impedit neque illo eos .</p>
  </div>
</div>

解决方案 #

1. 裁剪进度条线条到圆点位置

原来用container_wraper的border-top会铺满整个容器，改成给每个link（除第一个）添加左侧边框，让线条只在两个圆点之间：

• 移除container_wraper的border-top属性
• 给.link:not(:first-child)添加左侧边框作为进度条线条，配合圆点的z-index覆盖边框末端，确保线条截止到圆点位置
• 调整link的布局，让边框和圆点垂直对齐

2. 强制下方文本窄幅换行

• 给.lead添加gap属性增加文本块间距
• 给每个文本p标签设置flex:1均分宽度，搭配max-width限制文本宽度，用word-break: break-word强制换行
• 调整line-height让文本正常显示，避免重叠

修改后的完整代码 #

CSS

.wraper {
  padding: 50px;
  text-align: center;
  font-family: sans-serif;
  max-width: 1300px;
  margin: 10px auto;
}

.container_wraper {
  display: flex;
  list-style: none;
  padding: 0;
  justify-content: space-between;
  align-items: center;
}

.link {
  position: relative;
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* 给除第一个外的link添加左侧边框，作为进度条线条 */
.link:not(:first-child) {
  border-left: 2px solid #293ff9;
}

.link a {
  font-weight: bold;
  font-size: 16px;
  font-family: "poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #293ff9;
  letter-spacing: 2px;
  text-decoration: none;
  text-transform: uppercase;
}

.link::after {
  content: "";
  width: 12px;
  height: 12px;
  background: #fff;
  position: absolute;
  border-radius: 10px;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid blue;
  /* 用白色背景覆盖边框末端，确保线条截止到圆点 */
  z-index: 1;
}

.link:hover::after {
  background: #293ff9;
}

.lead {
  display: flex;
  gap: 15px; /* 增加文本块之间的间距 */
  list-style: none;
  padding: 0;
  margin-top: 3px;
}

.lead p {
  flex: 1;
  font-size: 10px;
  font-family: sans-serif;
  letter-spacing: 1px;
  font-weight: 400;
  line-height: 1.4; /* 调整行高，避免文本重叠 */
  word-break: break-word;
  max-width: 280px; /* 限制最大宽度，强制窄幅换行 */
  margin: 0 auto;
  text-align: center;
}

HTML

<div class="wraper">
  <ul class="container_wraper">
    <li class="link"><a href="">Materiały</a></li>
    <li class="link"><a href="">Algorytmy</a></li>
    <li class="link active"><a href="">Szkolenia</a></li>
  </ul>
  <div class="lead">
    <p class="lead1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit eligendi non id doloremque aliquid provident nobis consectetur recus.!</p>
    <p class="lead2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius vel perferendis repellat laborum iure laudantium ex ipsa repellendus dignissimos iusto.</p>
    <p class="lead3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae officiis quae mollitia totam quis cumque a iste sapiente impedit neque illo eos .</p>
  </div>
</div>

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