在同一行上的元素之间创建可视边框

Question

我想<span>在下面的代码片段中的元素之间有一个可视边框,管道或其他分隔符.麻烦的是,当它们流入新线时,我最终会在线的开头出现一个边框.如果元素在同一行上,我怎么能在元素之间应用某种边界？我完全愿意改变标记或采取另一种方法,但是我已经尝试了很多从flexbox到浮动的东西到目前为止没有成功.

规定:

• 我不想为此使用javascript.
• span内容是动态的,因此媒体查询将无法工作,因为我无法知道元素的宽度或它们可能会中断的位置.

这甚至可能吗？我已经看过这个类似的问题,但那里的答案要么使用js,要么使用媒体查询.

下面的代码片段是一个基本的例子,我将跨度放在一个可调整大小的div中,只是为了演示较小宽度的流问题.

.resizable {
  resize: horizontal;
  overflow: scroll;
  border: 1px solid black;
  height: 95vh;
  box-sizing: border-box;
  min-width: 120px;
  max-width: 100%;
  padding: 10px;
}

span {
  font-size: 18px;
  font-family: sans-serif;
}

span+span {
  margin-left: 10px;
  border-left: 2px solid #aaa;
  padding-left: 10px;
  display: inline-block;
}

<div class="resizable">
  <span>dog</span><span>cat</span><span>elephant</span><span>potato</span><span>boston clam chowder</span>
</div>

Answer 1

您可以通过使用隐藏溢出的容器和负边距来解决这个问题,以便在该溢出区域之外的行的开头"拖动"元素.

(在这个特定的例子中,overflow:hidden实际上并不是必需的,外部滚动元素已经处理了这个问题,但在不同的场景中可能需要它.)

1.5em这里使用的值是一个神奇的数字; 您可能希望用像素值替换它,因为您已经使用了像素作为边框及其与文本的间距 - 但一般来说,您应该能够通过一些实验找到"工作"值.

.resizable {
  resize: horizontal;
  overflow: scroll;
  border: 1px solid black;
  height: 95vh;
  box-sizing: border-box;
  min-width: 120px;
  max-width: 100%;
  padding: 10px;
}
.container {
  margin-left: -1.5em;
  width: calc(100% + 1.5em);
}
span {
  font-size: 18px;
  font-family: sans-serif;
  margin-left: 10px;
  border-left: 2px solid #aaa;
  padding-left: 10px;
  display: inline-block;
}

<div class="resizable">
  <div class="container">
  <span>dog</span><span>cat</span><span>elephant</span><span>potato</span><span>boston clam chowder</span><span>dog</span><span>cat</span><span>elephant</span><span>potato</span><span>boston clam chowder</span><span>dog</span><span>cat</span><span>elephant</span><span>potato</span><span>boston clam chowder</span>
  </div>
</div>