Bootstrap - 切断溢出的带有省略号的面包屑

Question

我在div中包含一个列表。我想将列表限制为一行，并使用省略号切断溢出div的任何文本。

我该怎么做？

<ol class="breadcrumb">
    <li><a href="#bar">Browse</a></li>
    <li><a href="#foo">Chairs</a></li>
    <li class="active">Super Awesome Chair with mighttttty powers</li>
</ol>

.breadcrumb {
    width: 300px;
}

https://jsfiddle.net/njfawg6e/1/

Answer 1

尝试使用以下CSS：

.breadcrumb {
    width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumb li {
    display: inline;
}

有关text-overflow的其他信息，请查看this article。

Answer 2

在Bootstrap 3（现在也是4！）中，我使用以下代码来截断面包屑中的特定元素。请注意，这确实禁用了Bootstrap 4中的一些flexbox功能，因为我们现在正在内联面包屑。

.breadcrumb li {
  display: inline;         // force the inlining
  max-width: 200px         // the actual width, you can make this bit responsive, increasing the width as your viewport increases. I suggest to utilize the native Bootstrap media-breakpoints (i.e. media-breakpoint-up(md)).
  white-space: nowrap;     // remove the wrapping and breaking of text in the breadcrumbs
  overflow: hidden;        // hide our overflow
  text-overflow: ellipsis; // return ellipsis for the overflow.
}

它看起来像这样（在Bootstrap 4中）：