창과 함께 축소되지만 내용이 왼쪽으로 흐려지는 빵 부스러기 만들기

Question

아주 길 수있는 탐색 경로를 만들 필요가 있습니다. 작은 화면의 창과 함께 축소되지만 그 안에있는 링크는 왼쪽으로 사라집니다. 방문한 페이지는 항상보기의 페이지이며, 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) */ 
}