如何防止此痕迹导致将长文本移动到新行

Question

我正在处理痕迹，但如果当前页面标题太长，它会在新行上显示，而不是将其分解。您可以在下面看到一个示例：

为了清楚起见，我希望文本被分解，因此它不会在新行上显示，而是在Blog旁边显示文本 - ＆gt;然后是适合的文本，直到它需要突破到一个新的行，如果你得到我..谢谢

这是我现在的代码：

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，您可以非常轻松地将V形符号移动到非活动的li元素（或者，更好的是，使用css :after伪元素。）

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