3

我有一个 div 中显示的面包屑页面。（25px 高 x 700px 宽）问题是我有太多页面，以至于面包屑中的页面标题从 div 中溢出。有没有办法让最后几个面包屑页面强制第一个面包屑页面不在视线范围内并显示最后安装在 Div 中的页面

希望这是有道理的

问候

R

4

4 回答 4

6

是的，您可以使用overflow和。floatwhite-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阻止面包屑从右边距开始。

于 2011-05-12T11:21:03.253 回答
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/

于 2011-05-12T11:25:34.707 回答
1

这是我将如何做的一个例子

于 2011-05-12T11:24:33.857 回答
1

您可以尝试overflow: hidden隐藏超出 div 大小的内容，以免破坏设计。

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

您可以在 http://www.brunildo.org/test/Overflowxy2.html获得更多详细信息

于 2011-05-12T11:25:40.853 回答