Question

我有一个显示在div中的面包屑页面。（25px高，700px宽）麻烦的是我有这么多页面，面包屑中的页面标题溢出了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阻止面包屑从右边缘开始。

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

This is an example我会怎么做

Answer 4

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

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

您可以在此处获取有关此内容的详细信息 http://www.brunildo.org/test/Overflowxy2.html

强制文本留在Div中

4 个答案:

HTML

CSS