CSS 줄임표 문자열의 시작

ByDavid Walsh onDecember 17, 2018

  • 6

CSS text-overflow: ellipsis (고정 된 widthoverflow: hidden와 결혼)이 CSS 사양 및 브라우저에 도입되었습니다.이 기능을 사용하면 JavaScript 너비 계산과 문자열 너비 계산 및 잘림을 결합하려는 시도를 중단 할 수있었습니다. CSS 줄임표도 접근성에 매우 친숙했습니다 .The CSS text-overflow: ellipsis 기능은 훌륭하지만 본질적으로 끝 부분에서만 문자열을 생략하는 것을 의미합니다. 화면의 시작 부분을 생략하려면 어떻게해야합니까? 사용 사례는 상당히 합리적입니다. 파일 경로 표시를 생각해보십시오. 파일 세트에 대한 디렉토리를 여러 번 표시합니다. 같은 경우에 문자열의 시작 부분이 아니라 끝 부분을 표시하고 싶을 것입니다. 문자열을 구걸 할 때 줄임표에 대한 트릭을 보여 드리겠습니다!

CSS

줄임표 표시 현의 앞에는 이끼 끝 부분의 줄임표와 동일하지만 한 가지 간단한 트릭 만 있으면됩니다. 문자열 시작 부분에 줄임표를 추가하려면 RTL 및 및 text-align를 사용하여 문자열의 시작 부분을 잘라냅니다! text-align에서 RTL을 재생하는 것은 요소 또는 문자열의 시작 부분에서 원하는 CSS 줄임표 효과를 얻을 수있는 천재적인 방법입니다. CSS 사양이보다 강력한 줄임표 시스템을 구현하는 것이 좋지만 지금은 이와 같은 놀라운 CSS 트릭을 숭배합니다!

Write a Comment

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다