> 웹 프론트엔드 > CSS 튜토리얼 > CSS는 텍스트의 두 번째 줄에만 줄임표를 만들 수 있나요?

CSS는 텍스트의 두 번째 줄에만 줄임표를 만들 수 있나요?

DDD
풀어 주다: 2024-12-16 03:47:12
원래의
594명이 탐색했습니다.

Can CSS Create an Ellipsis Only on the Second Line of Text?

두 번째 줄에 CSS 줄임표 달성

질문이 생깁니다. CSS text-overflow: 줄임표를 두 번째 줄에 구체적으로 적용할 수 있습니까? 텍스트? 꼼꼼한 조사에도 실행 가능한 해결책이 나오지 않았습니다. 대체 접근 방식을 살펴보겠습니다.

WebKit 브라우저 솔루션:

다음 CSS 코드는 WebKit 브라우저를 대상으로 하며 두 번째 줄에 줄임표를 효과적으로 생성합니다.

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
로그인 후 복사

이해하기 코드:

  • overflow: hided는 컨테이너 영역 외부의 오버플로를 방지합니다.
  • text-overflow: 줄임표는 잘림 시 줄임표를 트리거합니다.
  • display: -webkit-box 및 -webkit-box-orient: 수직 -webkit-line-clamp 속성을 활성화하여 function.
  • -webkit-line-clamp: 3은 최대 3줄이 표시되도록 지정하여 줄임표를 두 번째 줄로 효과적으로 제한합니다.

위 내용은 CSS는 텍스트의 두 번째 줄에만 줄임표를 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿