Bootstrap - 用省略号截断溢出的面包屑答案

【问题标题】：Bootstrap - cutoff overflowing breadcrumbs with an ellipsisBootstrap - 用省略号截断溢出的面包屑
【发布时间】：2015-07-14 21:46:01
【问题描述】：

我有一个包含在 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/

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

试试下面的 CSS：

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

.breadcrumb li {
    display: inline;
}

查看this article 了解有关text-overflow 的更多信息。

【讨论】：

这会截断整个面包屑，如果过长的标题是最后一个，那就太好了。您将如何截断面包屑中的每个路径部分，每个部分都有最大宽度？

【解决方案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 中）：

【讨论】：