css - 拉伸(stretch)左对齐栏以跟踪多行文本

Question

我正在尝试构建一个由左侧垂直进度条跟踪的列表。目前它在 13"屏幕上看起来还不错:

但是它很脆。任何元素的文本文本最终可能会跨越多行，我可能想在任何给定元素下方插入更多文本，并让左侧栏的相关部分垂直拉伸(stretch)，这样我们仍然会得到一个完整的栏.目前，它像这样中断:

在相当现代的浏览器中实现这种效果的最佳方式是什么？

当前代码的相关部分如下，但我对这里的最佳实践很感兴趣，所以不必阅读它(包括一些小的 ERB 插值):

<li  class="deployment-step">
  <div class="increment-wrapper">
    <div class="progress-increment <%= #incomplete, progressing or complete %>">
      &nbsp
    </div>
    <%= #@line_text %>
  </div>
</li>

.my-deployments .deployment-steps .deployment-step {
  padding-top: 0;
  padding-bottom: 0;
}
.my-deployments .increment-wrapper {
  display: inline-block;
}
.my-deployments .progress-increment {
  background-color: rgba(105,74,255,1);
  display: inline-block;
  box-sizing: border-box;
  width: 2px;
}
.my-deployments .progress-increment.complete {
  border-left: 5px solid rgba(105,74,255,1);
  border-right: 5px solid rgba(105,74,255,1);
}
.my-deployments .final-step .progress-increment {
  background-color: inherit;
  border: none;
}
.my-deployments .progress-increment.progressing {
  border-left: 5px solid rgba(105,74,255,0.2);
  border-right: 5px solid rgba(105,74,255,0.2);
  background-color: rgba(105,74,255,0.2);
  color: rgba(105,74,255,0.6);
}
.my-deployments .deployment-steps .incomplete {
  border-left: 4px solid #fafafe;
  border-right: 4px solid #fafafe;
  background-color: rgba(105,74,255,0.2);
  color: rgba(105,74,255,0.2);
  width: 10px;
}

Answer 1

您可以使用边框实现更简单、更通用的解决方案:

https://jsfiddle.net/rjeLpbz7/2/

此外，如果您正在构建响应式设计，则应避免使用 px 单位。使用 em、rem、vw 或 % 等相对单位将使您的设计更具适应性和可访问性.

ul {
  margin: 0;
  padding: 1em;
  font-family: Arial, Helvetica, sans-serif;
}

.deployment-step {
  list-style: none;
}

.deployment-step.incomplete {
  padding: .5em .5em .5em .8em;
  border-left: .15em rgba(105,74,255,0.2) solid;
  margin-left: .3em;
}

.deployment-step.progressing {
  border-left: .8em rgba(105,74,255,0.2) solid;
  margin-left: 0;
  padding: .5em;
}

.deployment-step.complete {
  border-left: .8em rgba(105,74,255,1) solid;
  margin-left: 0;
  padding: .5em;
}

<ul>
  <li class="deployment-step complete">Step one</li>
  <li class="deployment-step progressing">Step two <br> more text</li>
  <li class="deployment-step incomplete">Step three</li>
</ul>