CSS에서 여러 줄 텍스트의 끝 부분만 생략

5153 단어 CSS

하고 싶은 일


여러 줄 텍스트의 끝을... (3시 읽기) 에서 생략하려고 합니다.
이 경우 CSS를 통해서만 JavaScript를 사용하지 않으려면 합니다.

왜 CSS만 있습니까?


JavaScript에서 끝을 생략하는 방법을 사용하려면 행 수에 대한 코드를 어느 정도 써야 합니다.
또한 프로그램 라이브러리를 사용하는 방법도 있지만 버전 업그레이드와 jQuery 의존 등 몇 가지를 고려해야 한다.
CSS가 실현될 수 있다면 이 같은 우려는 줄어들고, 보수성을 유지하기 위해 CSS로만 구현할 수 있는 방법을 찾았다.

실현 방법


CSS line-clamp 사용

display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
장점
- 적은 행수로 구현 가능
- 폭이 변해도 이상한 간격이 생기지 않고 예쁘게 표시
결점
-IE, Firefox에서 미대응→IE에서 미대응
- 폰만 지원하면 사용 가능(안드로이드 버전의 Firefox 사용자도 있지만...)
- 사용 시 스페어를 설정하는 것이 좋습니다.
참조: https://codepen.io/martinwolf/pen/qlFdp

추기 2019.08.29


축하합니다!Firefox가 대응했습니다.

https://caniuse.com/#search=webkit-line-clamp
※ 참고로 Firefox for Android는 아직 지원되지 않습니다. 이동이 필요할 경우 주의하십시오

IE(최소) 대응


IE는 추천하지 않지만 레이아웃이 좋지 않은 상황에서 사용할 수 있는 견본을 써 봤어요.
IE의 경우... (3시 리더) 는 표시되지 않고, 초과된 문장은 표시되지 않습니다 (hidden).
See the Pen CSS line-clamp with IE compatible by Sho Ezawa ( @ezawa800 )
on CodePen .

IE로 보기



IE 이외의 경우



before, after 요소 사용


.ellipsis {
    position: relative;
    height: 80px;
    overflow: hidden;
    line-height: 20px;
}

.ellipsis:before, .ellipsis:after {
    position: absolute;
    background: #fff;
}

.ellipsis:before {
    content: "･･･";
    bottom: 0;
    right: 0;
}

.ellipsis:after {
    content: "";
    width: 100%;
    height: 100%;
}

copied by http://blog.keisuke11.com/webdesign/word-trim/


장점

- 모든 브라우저에서

실행

단점- 행수가 많아서 약간 허크함

- 텍스트 끝과...(3점) 사이에 간격이 있을 수 있습니다(특히 너비가 변할 때)


컴퓨터 대응이 필요합니다. Firefox를 제거할 수 없는 경우에는 이쪽을 보십시오

개인은 두 번째 결점을 소홀히 해서는 안 되기 때문에 사용하고 싶지 않다p>

총결산


Firefox씨!CSS line-clamp 지원br/>
(IE 가능)


Firefox씨 감사합니다!

이렇게 하면 LINE clamp을 안심하고 사용할 수 있습니다!


학창시절에 만든 학원제 사이트 이야기[전단편]
Java 네트워크 프로그래밍 인터넷 주소 찾기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage