Jquery 创建一个面包屑，该面包屑随窗口收缩，但会遮挡左侧的内容

我需要制作一个面包屑导航，它可能相当长，随着小屏幕窗口的缩小而缩小，但里面的链接会消失在左边，即最近访问的页面总是视图中的页面，CSS中的百分比宽度不起作用，所以我想JQuery。

简单地使用方向组合：rtl；和溢出：隐藏；。例如，请尝试以下示例代码

HTML

---

浮球呢：对，溢出：隐藏+一些适当调整大小的方法？面包屑需要总是放在左边，所以无论如何谢谢，但也许我应该让它更清楚，它可能只是一些页面上的一个链接，需要左对齐。正确调整大小基本上是我试过的问题浮动：左侧溢出：隐藏哪种工作但是最新的链接消失在我希望相反的地方，最新的链接保留在视图中，而菜单消失在左侧。我建议的结构是wrapper>breadcrumb float：右边，wrapper仍然是左对齐的，您可以使用css魔术，或者可能是一些简单的javascript来调整面包屑的大小，以便新内容增加宽度，然后将宽度推到左侧。这只是一个粗略的想法，可能需要，也可能不需要更多的工作才能真正实现。非常好的解决方案，问题是如果你最小化页面，链接就会变得模糊，不再出现。这就是为什么我认为JQuery可能是goSorry最小化然后再最大化的方法。您希望该行为是什么？或多或少与它在FFox中的工作原理相同，如果您最小化页面，bcrumb将移至左侧隐藏，然后，当您再次最大化浏览器时，它会返回右侧，再次显示bcrumb。谢谢你的回复，最后帮了我很多忙。

<div id="breadcrumb">
  <a href="#">Home</a> &gt;
  <a href="#">Page</a> &gt; 
  <a href="#">Page</a> &gt; 
  <a href="#">Page</a> &gt; 
  <a href="#">Page</a> &gt; 
  <a href="#">Page</a> &gt; 
  <a href="#">Page</a> &gt; 
  <a href="#">Page</a> &gt; 
  <a href="#">Page</a> &gt; 
  <a href="#">Page</a> &gt; 
  <a href="#">Parent</a> &gt; 
  Current Page
</div>

#breadcrumb {
  overflow: hidden;
  direction: rtl;
  white-space: nowrap; /* keeps everything on one line */
  width: 50%; /* change this to whatever you want (for example, 300px) */
}