Question

我希望在以下代码段中的<span>元素之间有一个可视边框，竖线或其他分隔符。麻烦的是，当它们流入新线时，我最终会在线的开头出现一个边框。我怎样才能在元素之间应用某种边界，只有当它们在同一行时？我完全愿意改变标记或采取其他方法，但是我已经尝试了很多从flexbox到浮动的东西，但是没有成功。

规定：

我不想为此使用javascript。
span内容是动态的，因此媒体查询无效，因为我无法知道元素的宽度或它们可能会破坏的位置。

这甚至可能吗？我已经查看了this similar question，但那里的答案要么使用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值有点神奇;您可能希望用像素值替换它，因为您已经使用了边框的像素及其与文本的间距 - 但通常，您应该能够通过一些实验找到“工作”值。 / p>

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

这是一个纯 CSS 方法，也适用于居中元素。

相邻图块的 ::before 和 ::after 用于在元素之间创建一条暗带，然后，容器的 ::before 将较亮的东西剪掉。

缺点 - 由于涉及大量数学运算，因此获得完美的颜色可能很棘手。

section {
  text-align: center;
  position: relative;
}

section::before {
  
  /* Clip light areas to pure white, leaving only boarders*/
  mix-blend-mode: color-dodge;
  background: #bbb;
  z-index: -1000;
  
  /* Fill Parent */
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  content: "";
}

span {
  position: relative;
  display: inline-block;
  
  box-sizing: border-box;
  padding: 10px;
}

/* Spans slightly overlap creating darker lines between elements*/
span::before {
  left: -1px;
}
span::after {
  right: -1px;
}
span::before, span::after {
  position: absolute;
  content: "";
  display: block;
  width: 10px;
  height: 100%;
  background: #555;
  top: 0;
  z-index: -1001;
  mix-blend-mode: multiply;
}

<section>
  <span>Hello</span><span>Cats</span><span>Fish</span><span>Dogs</span><span>Hello</span><span>Cats</span><span>Fish</span><span>Dogs</span><span>Hello</span><span>Cats</span><span>Fish</span><span>Dogs</span>
</section>

出于某种原因，此代码在 Stackoverflow 的 JSFiddle 中不起作用。这是一个指向 JSFiddle 的链接，它确实可以工作：

https://jsfiddle.net/mdsimmo/vwu7xbjp/2/

在同一行

2 个答案: