面包屑包装

Question

当用户走下目录结构时，我的页面上有一个痕迹，但我想防止面包屑如果太长而换行，而是开始缩短路径。

从

开始

Home / Folder 1 / Folder 2
/ File

到

Home / ... / Folder 2 / File

http://jsfiddle.net/6vhhH/4/

实际上改变文本并不是真正的问题，它会检测面包屑何时包裹并触发代码以便在有人调整窗口大小时进行文本替换。

更新

如果它对未来的搜索者有用，那么这就是我最终的结果

http://jsfiddle.net/6vhhH/10/

Answer 1

您可以在页面调整大小时检查面包屑的高度：

$(window).resize(function() {
    if($("#breadcrumb").height() > singleLineValue) {
         // change
    } else {
         // change back
    }
}):

其中＆＃39; breadcrumb＆＃39;是你的面包屑周围的包装的id（你可以随意使用nav或div）

Answer 2

在这个答案的帮助下 - http://jsfiddle.net/moagrius/wN7ah/和一些添加的代码，我有一个解决方案 - http://jsfiddle.net/6vhhH/7/

基本上我已经完成了以下工作：

• 使面包屑不被包裹并溢出隐藏。
• 我在最后<li>
添加了一个1px点
• 然后脚本检查该元素是否在页面外。

单击窗口以获得结果。