로고 옆에 탐색 경로 막대를 넣으려고합니다. 웹 사이트는 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>
모든에 대한 고정 폭을 설정하지 않고 (마지막으로 볼 수있는 이동 경로에 줄임표를 적용 할 수 있는가?
(나는 그만큼 분명 희망하지만 질문에 대한 답변을 받으실 수 있습니다.)
를 설정하면'최대-width' 당신의'분 - width' 미만 사용자가 정의한 기존의 CSS 규칙이 원하는 지점에서 줄임표를 생성하지 않는 이유는 무엇입니까? – andyb
슬프게도 ... 부모 요소 내에서 직접적으로 영향을주는 것으로 보입니다. – nulldozer