목록 요소의 긴 텍스트 자르기

Question

난 빵 부스러기 탐색 기능이있는 반응 형 웹 사이트에서 작업하고 있습니다.

탐색 경로 네비게이션이 너무 길어서 한 줄에 표시 할 수없는 경우 일부 도트로 잘라야합니다.

내가 지금까지 발견 한 모든 솔루션은 멀티 라인 텍스트를 사용하거나 텍스트를 포함하는 요소에 비해 너무 길 때 텍스트를 자르는데 의존하는 것처럼 보입니다.

는 기본적으로 내 코드는 다음과 같습니다 : 어떤 CSS는이 일을하는 유일한 해결책은

main { 
 
    
 
    max-width: 600px; 
 
    background: linear-gradient(to right, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); 
 
} 
 

 
nav.breadcrumb { 
 
    
 
    width: 100%; 
 
    padding: 0 2em; 
 
} 
 

 
ul { 
 
    
 
    width: 100%; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 

 
li { 
 
    
 
    display: inline-block; 
 
} 
 

 
li + li { 
 
    
 
    margin-right: 1em; 
 
}

<main> 
 
    <nav class="breadcrumb"> 
 
    <ul> 
 
     <li><a href="#">Lorem</a></li> 
 
     <li><a href="#">Ipsum</a></li> 
 
     <li><a href="#">Dolor sit amet</a></li> 
 
     <li><a href="#">Consectetur adipiscing elit</a></li> 
 
     <li><a href="#">Praesent</a></li> 
 
     <li><a href="#">Duis ullamcorper faucibus</a></li> 
 
     <li><a href="#">Nunc lacus elit, luctus eu molestie id</a></li> 
 
    </ul> 
 
    </nav> 
 
</main>

있습니까?

죄송합니다 내 질문이 몇 가지 선명도 누락 된 경우 : 실제로 달성하기 위해 노력하고 무엇에 대한 몇 가지 혼란이있을 것 같습니다 때문에

, 여기에 예입니다. 당신이 링크를 확인 http://codepen.io/anon/pen/pvwEZJ

Answer 1

당신은 text-overflow:ellipsis;를 찾고 있습니다 : 여기

은 코드 펜의

http://quirksmode.org/css/user-interface/textoverflow.html

Answer 2

네, 사용이 효과를 달성하기 위해 놀러 몇 가지 옵션이있다 text-overflow 속성

1 인 flexbox

• 을 설정 <ul> 태그를 display: flex
• 어린이 <li>에에 : 여기
  내가 그것을 사용하는 방법에 대한 몇 가지 예는, 어쩌면 당신을 위해 편리 것입니다 flex : 1 100 %, 그래서 theyll은 ul을 가로 질러 균등하게 늘어나고 오버 플로우 숨김과 텍스트 오버 플로우가 필요하다 : 줄임표;
• 완료. theyll 어딘가에 중지하고 '그래서 & 여기에 최대 폭을 사용하여 테이블 셀 ... 표 트릭

  2. <ul> 디스플레이 <li> 어린이

• display: table로 설정 ' 나타날거야; 또한 오버 플로우 숨김 및 텍스트 오버플로가 필요함 : 줄임표;
• 완료.

3. 고정 너비 + 부동, 표시 인라인 블록/블록 ...

• 는 float로 <li> 세트 또는 디스플레이 인라인 블록 및 그들에 고정 폭을 사용하므로 theyll 일부 지점에서 정지하지 다음 행으로 이동; 또한 오버 플로우 숨김 및 텍스트 오버플로가 필요함 : 줄임표;
• 완료.

체크 아웃 demos here, 또는 울부 짖는 소리 니펫이 당신에게

/*new stuff*/ 
 

 
*, 
 
*:after, 
 
*:before { 
 
    box-sizing: border-box; 
 
} 
 
/*flex*/ 
 

 
.flex { 
 
    display: flex; 
 
    padding: 0; 
 
} 
 
.flex > li { 
 
    margin: 0; 
 
    flex: 1 100%; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 
/*table way*/ 
 

 
.table { 
 
    display: table; 
 
    padding: 0; 
 
} 
 
.table > li { 
 
    overflow: hidden; 
 
    display: table-cell; 
 
    max-width: 40px; 
 
    text-overflow: ellipsis; 
 
} 
 
/*the fixed way*/ 
 

 
.fixed { 
 
    padding: 0; 
 
} 
 
.fixed li { 
 
    float: left; 
 
    overflow: hidden; 
 
    max-width: 14%; 
 
    /*7items divided by 100*/ 
 
    text-overflow: ellipsis; 
 
} 
 
main { 
 
    max-width: 600px; 
 
    background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%); 
 
} 
 
nav.breadcrumb { 
 
    width: 100%; 
 
    padding: 0 2em; 
 
} 
 
ul { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 
li { 
 
    display: inline-block; 
 
} 
 
li + li { 
 
    margin-right: 1em; 
 
}

<h1>The flex way</h1> 
 
<main> 
 
    <nav class="breadcrumb"> 
 
    <ul class='flex'> 
 
     <li><a href="#">Lorem</a> 
 
     </li> 
 
     <li><a href="#">Ipsum</a> 
 
     </li> 
 
     <li><a href="#">Dolor sit amet</a> 
 
     </li> 
 
     <li><a href="#">Consectetur adipiscing elit</a> 
 
     </li> 
 
     <li><a href="#">Praesent</a> 
 
     </li> 
 
     <li><a href="#">Duis ullamcorper faucibus</a> 
 
     </li> 
 
     <li><a href="#">Nunc lacus elit, luctus eu molestie id</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</main> 
 

 
<h1>The table way</h1> 
 
<main> 
 
    <nav class="breadcrumb"> 
 
    <ul class='table'> 
 
     <li><a href="#">Lorem</a> 
 
     </li> 
 
     <li><a href="#">Ipsum</a> 
 
     </li> 
 
     <li><a href="#">Dolor sit amet</a> 
 
     </li> 
 
     <li><a href="#">Consectetur adipiscing elit</a> 
 
     </li> 
 
     <li><a href="#">Praesent</a> 
 
     </li> 
 
     <li><a href="#">Duis ullamcorper faucibus</a> 
 
     </li> 
 
     <li><a href="#">Nunc lacus elit, luctus eu molestie id</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</main> 
 

 
<h1>The fixed way</h1> 
 
<main> 
 
    <nav class="breadcrumb"> 
 
    <ul class='fixed'> 
 
     <li><a href="#">Lorem</a> 
 
     </li> 
 
     <li><a href="#">Ipsum</a> 
 
     </li> 
 
     <li><a href="#">Dolor sit amet</a> 
 
     </li> 
 
     <li><a href="#">Consectetur adipiscing elit</a> 
 
     </li> 
 
     <li><a href="#">Praesent</a> 
 
     </li> 
 
     <li><a href="#">Duis ullamcorper faucibus</a> 
 
     </li> 
 
     <li><a href="#">Nunc lacus elit, luctus eu molestie id</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</main>