强制文本留在 Div 中

Question

我有一个 div 中显示的面包屑页面。（25 像素高 x 700 像素宽）问题是我有太多页面，面包屑中的页面标题从 div 中溢出。有没有办法让最后几个面包屑页面强制将第一个面包屑页面放在看不见的地方，并显示 Div

希望中安装的最后一个面包屑页面，这是有道理的

问候

R

Answer 1

是的，您可以使用溢出、浮动和空白。

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 阻止面包屑从右边距开始。

Answer 2

这似乎在 Chrome 中有效；哎呀知道早期版本的 IE 会如何处理它：

HTML

<div class="breadcrumb-container">
<ul class="breadcrumb">
    <li>1 breadcrumb item</li>
    <li>2 breadcrumb item</li>
    ...
    <li>10 breadcrumb item</li>
</ul>
</div>

CSS

.breadcrumb-container {
    float: left;
    max-width: 100%;
}

.breadcrumb-container .breadcrumb {
    float: right;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.breadcrumb-container .breadcrumb li {
    display: inline;
}

http://jsfiddle.net/Bu4J5/2 /

Answer 3

您可以尝试overflow:hidden来隐藏超出div大小的内容，这样就不会破坏设计。

div
{
text-align:right;
width:700px;
height:25px;
overflow-x:hidden;
}

您可以在以下位置获取更多详细信息：
http://www.brunildo.org/test/Overflowxy2.html

Answer 4

这是一个示例我将如何做到这一点