我有一个面包屑，我想设置最后一个面包屑应该覆盖空白答案

【问题标题】：I have a breadcrumb and I would like to set last breadcrumb should cover the empty space我有一个面包屑，我想设置最后一个面包屑应该覆盖空白
【发布时间】：2021-10-20 18:04:43
【问题描述】：

我有一个面包屑，我想设置 最后一个面包屑应该覆盖空白处

max-width 应该只显示有限的单词，但最后一个面包屑应该显示到浏览器宽度。

注意：如果文本很大不应该显示全文，它应该在同一行结束。如果面包屑标题更改应该正常工作，它应该动态工作

有没有办法使用last-child 解决这个问题？

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

ol.breadcrumb.training-breadcrumb li.breadcrumb-item {
  display: block;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<ol class="breadcrumb training-breadcrumb">
  <li class="breadcrumb-item">HTML</li>
  <li class="breadcrumb-item">Breadcrumb Breadcrumb Breadcrumb</li>
  <li class="breadcrumb-item">High brightness and opacity</li>
  <li class="breadcrumb-item">Last breadcrumb Last breadcrumb Last breadcrumb </li>
</ol>

【问题讨论】：

标签： html css breadcrumbs

【解决方案1】：

.breadcrumb-item:nth-last-child(1){
  max-width: 100%!important;
}

您将需要添加类似这样的内容。
“.breadcrumb-item:nth-last-child(1)” 指的是最后一个具有类“breadcrumb-item”的元素。
通常你不需要 !important 标签，但不知何故，如果没有...

【讨论】：

我已经尝试过了，但它转到了单独的行，根据我的要求，它不应该转到另一行，它应该在同一行结束。
codepen.io/luis-zuniga/pen/zYdKwzM 它适用于我的 codepen。也许父元素的宽度较小？
如果您添加更多文本，您会注意到它将进入单独的行，只有 li 有 max-width: 300px;