css - 强制文本留在 Div 中

Question

我有一个面包屑页面显示在一个 div 中。(25 像素高 x 700 像素宽)问题是我有太多页面以至于面包屑中的页面标题溢出了 div。有没有办法让最后几个面包屑页面强制第一个面包屑页面离开视线并显示最后一个适合 Div 的页面

希望这是有道理的

问候

R

Answer 1

是的，您可以使用overflow、float 和white-space。

HTML:

<div class="breadcrumb-container">
    <div class="breadcrumb">
    Start aaaa aaaa End
    </div>
</div>
<div class="breadcrumb-container">
    <div class="breadcrumb">
    Start aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa aaaa End
    </div>
</div>

CSS:

.breadcrumb-container {
    float:left; max-width:100%; margin:5px; overflow-x:hidden; background:orange;
}
.breadcrumb {
    float:right; margin:5px; white-space:nowrap; background:cyan;
}

这将强制链接保持在一行上并隐藏左侧的任何溢出文本，因此最后的类别可见。 float:left 阻止面包屑从右边距开始。