css - 防止多个内联元素以分隔符开头

Question

好的，这里有一些我找不到简单方法来处理的问题。我有一个链接列表，它可以是示例标签或任何东西，我想显示所有链接，并用分隔符分隔。 Here is an example .

问题是因为元素的长度未知并且需要在 mulline 上换行(例如标签可以有很长的名称)，有时分隔符是行的第一个元素，这很丑陋。你有什么办法可以防止在分隔符 span 之前换行吗？

.list {
  font-size: 0;
  line-height: 0;
  max-width: 290px;
}
.list > * {
  font-size: 14px;
  line-height: 20px;
}
.list > span {
  padding: 0 5px;
}

<div class="list">
<a href="#">Lorem</a>
<span>/</span>
<a href="#">Ipsum</a>
<span>/</span>
<a href="#">Lorem dolor ipsum amet dolor long foo bar baz lorem</a>
<span>/</span>
<a href="#">Ipsum dolor amet</a>
<span>/</span>
<a href="#">Lorem</a>
<span>/</span>
<a href="#">Ipsum</a>
<span>/</span>
<a href="#">Lorem ipsum</a>
<span>/</span>
<a href="#">Dolor</a>
<span>/</span>
<a href="#">Lorem dolor</a>
<span>/</span>
<a href="#">Ipsum dolor amet</a>
<span>/</span>
<a href="#">Lorem</a>
<span>/</span>
<a href="#">Ipsum</a>
<span>/</span>
<a href="#">Lorem ipsum</a>
<span>/</span>
<a href="#">Dolor</a>
<span>/</span>
<a href="#">Lorem dolor</a>
<span>/</span>
<a href="#">Ipsum dolor amet</a>
<span>/</span>
<a href="#">Lorem</a>
<span>/</span>
<a href="#">Ipsum</a>
<span>/</span>
<a href="#">Lorem ipsum</a>
<span>/</span>
<a href="#">Dolor</a>
<span>/</span>
<a href="#">Lorem dolor</a>
<span>/</span>
<a href="#">Ipsum dolor amet</a>
<span>/</span>
<a href="#">Lorem</a>
<span>/</span>
<a href="#">Ipsum</a>
<span>/</span>
<a href="#">Lorem ipsum</a>
<span>/</span>
<a href="#">Dolor</a>
<span>/</span>
<a href="#">Lorem dolor</a>
<span>/</span>
<a href="#">Ipsum dolor amet</a>
<span>/</span>
<a href="#">Lorem</a>
<span>/</span>
<a href="#">Ipsum</a>
<span>/</span>
<a href="#">Lorem ipsum</a>
<span>/</span>
<a href="#">Dolor</a>
<span>/</span>
<a href="#">Lorem dolor</a>
<span>/</span>
<a href="#">Ipsum dolor amet</a>
<span>/</span>
</div>

Answer 1

希望对你有帮助

.list {
  font-size: 0;
  line-height: 0;
}

.list > * {
  font-size: 14px;
  line-height: 20px;
}

.list > .wrapper {
  display: inline-block;
  white-space: nowrap;
}

.list > .wrapper > span {
  padding: 0 5px;
}

<div class="list">
  <span class="wrapper">
    <a href="#">Lorem</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Ipsum</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Lorem ipsum</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Dolor</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Lorem dolor</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Ipsum dolor amet</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Lorem</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Ipsum</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Lorem ipsum</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Dolor</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Lorem dolor</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Ipsum dolor amet</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Lorem</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Ipsum</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Lorem ipsum</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Dolor</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Lorem dolor</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Ipsum dolor amet</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Lorem</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Ipsum</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Lorem ipsum</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Dolor</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Lorem dolor</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Ipsum dolor amet</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Lorem</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Ipsum</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Lorem ipsum</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Dolor</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Lorem dolor</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Ipsum dolor amet</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Lorem</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Ipsum</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Lorem ipsum</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Dolor</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Lorem dolor</a>
    <span>/</span>
  </span>
  <span class="wrapper">
    <a href="#">Ipsum dolor amet</a>
    <span>/</span>
  </span>
</div>