스팬 잘못을 범하기도 텍스트가 너무 긴

첫째, 몇 가지 제한 사항 가져옵니다 스팬 잘못을 범하기도 텍스트가 너무 긴

내가 제한된 CSS 어휘를, 그래서 그 약간의 교육을 부탁드립니다, 그리고
내가 힘을 가지고있는 유일한 방법을 변경은 글로벌 스타일 시트입니다.

당신은 텍스트 크기 또는 하위 요소의 수를 증가하는 경우를 제외하고

이, 그때는 다음과 같습니다 :

I는 다음과 같습니다 탐색 경로라는 링크 목록을

내가 F12을 눌러 HTML을 볼 때

after

, 그것은 다음과 같습니다

,536,

<div id="Breadcrumb"> 
    <span id="dnn_dnnTEXT_lblText" class="Intro">You are here:</span> 
    <span id="dnn_dnnBreadcrumb_lblBreadCrumb"> 
     <a class="SkinObject" href="https://www.c-ied.org/Projects.aspx">Projects</a> 
     <span class="Sep"></span> 
     <a class="SkinObject" href="https://www.c-ied.org/Projects/Capabilities.aspx">Capabilities</a> 
     <span class="Sep"></span> 
     <a class="SkinObject" href="https://www.c-ied.org/Projects/Capabilities/MaritimeInitiative.aspx">Maritime Initiative</a> 
     <span class="Sep"></span> 
     <a class="SkinObject" href="https://www.c-ied.org/Projects/Capabilities/MaritimeInitiative/MSC2012.aspx">MSC 2012</a> 
     <span class="Sep"></span> 
     <a class="SkinObject" href="https://www.c-ied.org/Projects/Capabilities/MaritimeInitiative/MSC2012/6June.aspx">6 June</a> 
    </span> 
</div>

이것은 DotNetNuke CMS에 있습니다. 따라서 사이트 설정에서 스타일 시트 편집기를 사용하여 엉망이 될 수 있습니다. 내가 거기에서 시험해 본 어떤 것도 효과가 없었습니다. #dnn_dnnBreadcrumb_lblBreadCrumb {width: 100%}을 제외하고는 더 악화되었습니다.

나는 또한 위의 HTML을 가져 와서 내가 다른 모듈에 추가하고있는 일부 텍스트 블록 위에 놓았다. 저기, 괜찮아. 돌아 가기 F12에 다시와 dnn_dnnBreadcrumb_lblBreadCrumb 범위에 대해 서로 다른 보이는 TraceStyles에서 유일하게 선이었다 일부 교차 아웃 스타일 :이 전에 동안

F12 After

F12 Before

그래서, 이 모든 것은 IE에서보아야합니다. 일부 셀렉터 또는 다른 CSS 애트리뷰트에서 사용할 수있는 CSS 속성이 있나요?

출처

2012-11-06 Dave Babbitt

음란, 당신은 오버 플로우를 시도 할 수 있습니다 : 당신의 용기 #Breadcrumb에 숨겨진. 줄 바꿈을 방지해야 할 때 컨테이너의 숨겨진 부분에 긴 빵 부스러기를 잃을 수 있습니다.

다른 솔루션으로 각 이동 경로 항목의 너비를 측정하고 컨테이너 경계에 도달하면 중간 항목을 '여기 있습니다'로 바꾸고 마지막 2/3 항목을 단일 클릭 할 수없는 줄임표 (...) 항목. 예 :

You Are Here: Projects > ... Msc 2012 >

출처

2012-11-06 23:00:12

작동 방식 : #Breadcrumb { 오버플로 : 숨김; } –

빵 부스러기에 대한 font-size은 특정 픽셀 값으로 설정되었습니다. line-height을 특정 픽셀 값으로 설정해야 할 수 있습니다.

(이 이상적 아니지만. 사용자는 텍스트 크기를 늘릴 수 있어야합니다.)

출처

2012-11-06 20:12:35

그것은 당신의 DOM의 나머지 부분을 보지 않고 알고 정말 열심히, 그러나 #dnn_dnnBreadcrumb_lblBreadCrumb 단지처럼 보인다 (#Breadcrumb)에 더 이상 들어 가지 않게되었습니다. 그러므로 그것은 감싼다.

내가 처음이 같은으로 해킹을 시도 할 것 : 그것이

#Breadcrumb { 
    white-space: nowrap; 
    width: 100%; 
}

출처

2012-11-06 20:33:43

이것은 아무런 효과가 없습니다. –

스팬 잘못을 범하기도 텍스트가 너무 긴

답변

관련 문제