小贝子编程

防止多个内联元素由分离器开始

  • 本文关键字：元素 分离器 开始 css
  • 更新时间 :
  • 英文 :


好的，在这里我找不到一种简单的处理方法。我有一个链接列表，它可以是典范或其他任何链接的标签，我想显示所有由分隔符隔开的标签。这是一个例子。

问题是，由于元素的长度未知，需要在穆林上折断（例如，标签可以具有长名），因此有时分离器是该行的第一个元素，所以它是Uggly。您是否有任何方法可以防止这种包裹在分离器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>

我希望这对您有帮助，

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

您可以使用::after，例如：

<div class="list">
<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><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>
</div>

.list {
  font-size: 0;
  line-height: 0;
}
.list > * {
  font-size: 14px;
  line-height: 20px;
}
.list > span {
  white-space: nowrap;
}
.list > span::after {
  display: inline-block;
  content: '/';
  padding: 0 5px;
}

https://jsfiddle.net/lby5u1st/2/

有很多处理此问题的方法。我举几个例子。问题的症结在于，您取决于HTML来设置您的网页。HTML将处理内容的流程，但实际上，它应该只是为页面提供语义含义，而不提供任何风格的装饰。

content 伪元素方法

我们可以从HTML中删除分离器，然后通过CSS添加它们而不是使用content。这也将使我们不显示最后一项的分离器。

然后，我们可以将列表项目设置为inline-block，它仍然可以使它们一起流动，并为我们的Whitespace添加no-wrap，这将阻止分离器作为列表中的第一个项目出现。

.list {
  font-size: 0;
  line-height: 0;
}
.list > * {
  display: inline-block;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}
.list > *:not(:last-child)::after {
  content: '/';
  display: inline-block;
  margin: 0 5px;
}
<div class="list">
  <a href="#">Lorem</a>
  <a href="#">Ipsum</a>
  <a href="#">Lorem ipsum</a>
  <a href="#">Dolor</a>
  <a href="#">Lorem dolor</a>
  <a href="#">Ipsum dolor amet</a>
  <a href="#">Lorem</a>
  <a href="#">Ipsum</a>
  <a href="#">Lorem ipsum</a>
  <a href="#">Dolor</a>
  <a href="#">Lorem dolor</a>
  <a href="#">Ipsum dolor amet</a>
  <a href="#">Lorem</a>
  <a href="#">Ipsum</a>
  <a href="#">Lorem ipsum</a>
  <a href="#">Dolor</a>
  <a href="#">Lorem dolor</a>
  <a href="#">Ipsum dolor amet</a>
  <a href="#">Lorem</a>
  <a href="#">Ipsum</a>
  <a href="#">Lorem ipsum</a>
  <a href="#">Dolor</a>
  <a href="#">Lorem dolor</a>
  <a href="#">Ipsum dolor amet</a>
  <a href="#">Lorem</a>
  <a href="#">Ipsum</a>
  <a href="#">Lorem ipsum</a>
  <a href="#">Dolor</a>
  <a href="#">Lorem dolor</a>
  <a href="#">Ipsum dolor amet</a>
  <a href="#">Lorem</a>
  <a href="#">Ipsum</a>
  <a href="#">Lorem ipsum</a>
  <a href="#">Dolor</a>
  <a href="#">Lorem dolor</a>
  <a href="#">Ipsum dolor amet</a>
</div>

Just pseudo元素方法

上述代码仍然存在问题。尽管我们已经从HTML中删除了分离器，但我们仍在使用 content 作为样式。如果屏幕读取器遇到上述标记，它将读取类似的内容：" Lorem forward slash lorem ipsum forthrom slash slash dolor dolor fortht slash slash ，ETC"。HTML旨在提供语义含义，然后我们使用CSS提供样式，因此我们可以通过将伪元素作为分离器进行造型并将其从content属性中删除。

。

.list {
  font-size: 0;
  line-height: 0;
}
.list > * {
  display: inline-block;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}
.list > *:not(:last-child)::after {
  background-color: #000;
  content: '';
  height: .8em;
  display: inline-block;
  margin: 0 5px -2px;
  transform: rotate(15deg);
  width: 1px;
}
<ul class="list">
  <li><a href="#">Lorem</a></li>
  <li><a href="#">Ipsum</a></li>
  <li><a href="#">Lorem ipsum</a></li>
  <li><a href="#">Dolor</a></li>
  <li><a href="#">Lorem dolor</a></li>
  <li><a href="#">Ipsum dolor amet</a></li>
  <li><a href="#">Lorem</a></li>
  <li><a href="#">Ipsum</a></li>
  <li><a href="#">Lorem ipsum</a></li>
  <li><a href="#">Dolor</a></li>
  <li><a href="#">Lorem dolor</a></li>
  <li><a href="#">Ipsum dolor amet</a></li>
  <li><a href="#">Lorem</a></li>
  <li><a href="#">Ipsum</a></li>
  <li><a href="#">Lorem ipsum</a></li>
  <li><a href="#">Dolor</a></li>
  <li><a href="#">Lorem dolor</a></li>
  <li><a href="#">Ipsum dolor amet</a></li>
  <li><a href="#">Lorem</a></li>
  <li><a href="#">Ipsum</a></li>
  <li><a href="#">Lorem ipsum</a></li>
  <li><a href="#">Dolor</a></li>
  <li><a href="#">Lorem dolor</a></li>
  <li><a href="#">Ipsum dolor amet</a></li>
  <li><a href="#">Lorem</a></li>
  <li><a href="#">Ipsum</a></li>
  <li><a href="#">Lorem ipsum</a></li>
  <li><a href="#">Dolor</a></li>
  <li><a href="#">Lorem dolor</a></li>
  <li><a href="#">Ipsum dolor amet</a></li>
  <li><a href="#">Lorem</a></li>
  <li><a href="#">Ipsum</a></li>
  <li><a href="#">Lorem ipsum</a></li>
  <li><a href="#">Dolor</a></li>
  <li><a href="#">Lorem dolor</a></li>
  <li><a href="#">Ipsum dolor amet</a></li>
</ul>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium