목록 항목 내에서 개별 텍스트 블록 잘림

Question

각 항목이 3 부분으로 나뉘어있는 항목 목록이 있습니다.

<li>[long part(1)] [separator(2)] [important part(3)]</li> 

나는 첫 번째 부분 ("긴 부분") 대신 랩의 절단하고 싶다.

첫 번째 부분은 줄 바꿈하지 않고 나머지 부분은 줄 바꿈 할 수 있지만 브라우저에서 첫 번째 부분을 자르는 방법을 알 수는 없습니다. https://codepen.io/fiver/pen/rGRevq?editors=1010

측면에 출력 창을 이동할 Change view 버튼을 사용

여기 codepen 예이다. 그런 다음 슬라이더를 사용하여 줄 바꿈 동작을 볼 수 있습니다. flexbox ("flex try")와 스타일 오버 플로우 속성 ("overflow try")을 사용해 보았지만 두 가지 모두 텍스트를 뷰 밖으로 확장합니다.

세 번째 항목은 내 해결 방법입니다 (그냥 감싸 웁니다). 내가하고 싶은 것이 아니라 작동합니다.

그래서 첫 부분을 생략 할 수있는 방법이 있습니까 (줄임표 포함 또는 생략)?

Edge (실제로 입찰하지 않음), Chrome, Firefox 및 Safari (모바일 및 데스크톱)와 같은 최신 브라우저에서만 작동해야합니다. 나는 IE 나 안드로이드 브라우저에 대해 걱정할 필요가 없다.

Answer 1

귀하의 "오버 플로우 시도"작동하지만 당신은 경간이 2

overflow: hidden; 
text-overflow: ellipsis; 

Answer 2

<li>에 사용하는로두고해야합니다. CSS에서 display 속성을 설정하고 width도 설정해야합니다.

span { 
     display: block; 
     overflow: hidden; 
     text-overflow: ellipsis; 
     white-space: nowrap; 
     width: 40%; /* it be upto requirment */ 
    }