HTML/CSS - Elipsise 로고 왼쪽으로 빵 부스러기

로고 옆에 탐색 경로 막대를 넣으려고합니다. 웹 사이트는 1000px에서 400px로 확장되어야합니다. 따라서 너무 길어서 빵 부스러기를 생략 할 수 있다면 좋을 것입니다 (새 줄을 시작하면 빵 부스러기 텍스트가 로고와 수평으로 정렬되므로 새로운 줄을 시작하지 않아도됩니다). 본문).HTML/CSS - Elipsise 로고 왼쪽으로 빵 부스러기

ASCII 아트로

원하는 모양 :

모든 텍스트가 맞는 :

/-\ 
    \-/ 
COMPANY Breadcrumb > Breadcru...

내 HTML은 다음과 같습니다

/-\ 
    \-/ 
COMPANY Breadcrumb > Breadcrumb > Breadcrumb

축소 할 때 :

이제
<div> <a href="..."> <img src="logo"/> </a> </div> <div style="position: absolute; top: 50px; left: 0px; overflow: hidden; text-overflow: ellipsis; min-width: 400px; white-space: nowrap; max-width: 100%;"> <a href="..." style="margin: 0 0 0 100px;">Top Crumb</a> <span> > </span> <a href="...">2nd Level Crumb</a> <span> > </span> <a href="...">3rd Level Crumb</a> </div>

는 어떻게 <span> 및 <a> 모든에 대한 고정 폭을 설정하지 않고 (마지막으로 볼 수있는 이동 경로에 줄임표를 적용 할 수 있는가?

(나는 그만큼 분명 희망하지만 질문에 대한 답변을 받으실 수 있습니다.)

출처

2012-09-03 nulldozer

를 설정하면'최대-width' 당신의'분 - width' 미만 사용자가 정의한 기존의 CSS 규칙이 원하는 지점에서 줄임표를 생성하지 않는 이유는 무엇입니까? – andyb

슬프게도 ... 부모 요소 내에서 직접적으로 영향을주는 것으로 보입니다. – nulldozer

이 http://jsfiddle.net/C97kC/

를 참조 그냥 제거 min-width: 400px

CSS :

#div{ 
    position: absolute; top: 50px; left: 0px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    max-width: 100%; 
}

HTML :

<div> 
    <a href="..."> 
     <img src="logo"/> 
    </a> 
</div> 
<div id="div"> 
    <a href="..." style="margin: 0 0 0 100px;">Top Crumb</a> 
    <span>&nbsp;&gt;&nbsp;</span> 
    <a href="...">2nd Level Crumb</a> 
    <span>&nbsp;&gt;&nbsp;</span> 
    <a href="...">3rd Level Crumb</a> 
</div>

편집 :

당신이 적어도 400 픽셀 폭 싶은 경우에, 당신은 당신이 가지고있는 코드를 사용할 수 있습니다. 문제는 텍스트가 충분히 길지 않았다는 것입니다. 당신이 사용하는 경우

...

<a href="..." style="margin: 0 0 0 100px;">Top Crumb</a> 
<span>&nbsp;&gt;&nbsp;</span> 
<a href="...">2nd Level Crumb</a> 
<span>&nbsp;&gt;&nbsp;</span> 
<a href="...">3rd Level Crumb</a> 
<span>&nbsp;&gt;&nbsp;</span> 
<a href="...">4rd Level Crumb</a>

... 당신은 줄임표를 볼 수 있습니다.

데모 : http://jsfiddle.net/C97kC/1/

출처

2012-09-03 12:53:24 user1637256

HTML/CSS - Elipsise 로고 왼쪽으로 빵 부스러기

답변

관련 문제