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.