强制将文本留在 Div 中答案

【问题标题】：Forcing text left in a Div强制将文本留在 Div 中
【发布时间】：2011-05-12 11:17:05
【问题描述】：

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

希望这是有道理的

问候

【问题讨论】：

标签： css breadcrumbs

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

【讨论】：

我相信这是朝着解决方案迈出的一大步，并且即将给你 +1，但我没有设法在 jsfiddle 中工作。也许你想看看，看看缺失的部分是什么？ jsfiddle.net/zCwQD/1
好的，我设法解决了。 jsfiddle.net/MQndr/2我也会更新答案。

【解决方案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/

【讨论】：

Thanks 在 Firefox 中运行良好，但在 IE 中不行。似乎 IE 不喜欢 Float 或 White-space: nowrap。有人知道解决方法吗？

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

This is an example我会怎么做

【讨论】：

不错的方法，但不完全符合 OP 的要求。从您的示例中删除链接 2 到 5，您会看到链接 1 移动到了面包屑的右侧。当有足够的空间时，OP 希望链接 1 保持在左侧。