如何防止此面包屑将长文本移动到新行

Question

我正在做一个面包屑，但是如果当前页面标题太长，它会换行显示，而不是拆分。你可以看下面的例子：

为了清楚起见，我希望文本被打断，所以它不会在新行中显示，而是在博客旁边显示文本 -> 然后显示适合的文本直到它需要换行，如果你明白我的话。谢谢

这是我现在拥有的代码：

main .breadcrumb .inner .wi-breadcrumb {
  padding-left: 0;
  margin: 0 0 0 0;
}

main .breadcrumb .inner .wi-breadcrumb li {
  list-style: none;
  display: inline-block;
  font-size: 13px;
}

main .breadcrumb .inner .wi-breadcrumb span {
  font-size: 10px;
}

main .breadcrumb .inner .wi-breadcrumb li a {
  color: #000;
}

main .breadcrumb .inner .wi-breadcrumb .active {
  color: #464646;
}

<ul class="wi-breadcrumb">
  <li><a href="https://domain.dk">Forside</a></li>
  <span class="icon-chevron-right"></span>
  <li><a href="https://domain.dk/blog">Blog</a></li>
  <span class="icon-chevron-right"></span>
  <li class="active">Første blog indlæg hvor titlen er for lang til at passe</li>
</ul>

Answer 1

将活动元素设置为 display: inline;。

.wi-breadcrumb .active {
  color: #464646;
  display: inline; /* <-- This bit */
}

.wi-breadcrumb {
  padding-left: 0;
  margin: 0 0 0 0;

}

.wi-breadcrumb li {
  list-style: none;
  display: inline-block;
  font-size: 13px;
}

.wi-breadcrumb span {
  font-size: 10px;
}

.inner .wi-breadcrumb li a {
  color: #000;
}

<ul class="wi-breadcrumb">
  <li><a href="https://domain.dk">Forside</a></li>
  <span class="icon-chevron-right"></span>
  <li><a href="https://domain.dk/blog">Blog</a></li>
  <span class="icon-chevron-right"></span>
  <li class="active">Første blog indlæg hvor titlen er for lang til at passe Første blog indlæg hvor titlen er for lang til at passe Første blog indlæg hvor titlen er for lang til at passe</li>
</ul>

要修复无效的 HTML，您可以很容易地将人字形移动到非活动 li 元素（或者，更好的是，使用 css :after 伪元素）。

<li>
    <a href="https://domain.dk/blog">Blog</a>
    <span class="icon-chevron-right"></span>
</li>

如何防止此面包屑将长文本移动到新行

How can I prevent this breadcrumb from moving long text to a new line

css

breadcrumbs