Javascript 面包屑包装

当用户沿着目录结构走下去时，我的页面上有一个面包屑，但是如果面包屑太长，我想防止它缠绕到新行上，而是开始缩短路径

从

Home / Folder 1 / Folder 2
/ File

到

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

更新：

如果这对未来的搜索者有用的话，下面是我的结论

---

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

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

---

其中，“面包屑”是面包屑导航或div周围包装物的id，如您所愿

借助此答案-以及一些添加的代码，我为您提供了一个解决方案-

基本上，我做了以下工作：

使面包屑不包裹和溢出隐藏。 我在最后一个点上加了一个1像素的点 脚本然后检查该元素是否离开页面。

---

单击窗口以获得结果。

这似乎是它的开始。我想当我完成的时候，它会比仅仅和if-else块更复杂，以满足缩小一点的需要。我选择这个作为更好的答案，因为它让我更接近于灵活的事情。我很喜欢这个，但它限制了检查窗口的大小。在一个不太简单的例子中，有更多的内容添加到面包屑轨迹的右侧，这是否仍然有效，而不必同时考虑这些动态对象的大小？这是灵活的，只要将第28行更改为您选择的包装器即可。看这个例子-

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