jquery - 创建一个随着窗口缩小但隐藏左侧内容的面包屑

Question

我需要制作一个面包屑导航，它可能会很长，随着小屏幕的窗口缩小，但其中的链接会向左消失，即最近访问的页面始终在 View 中，CSS 中的百分比宽度不工作，所以想 JQuery。

Answer 1

只需结合使用 direction: rtl; 和 overflow: hidden;。例如，试试这个示例代码 ( demo )。

HTML

<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>

CSS

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