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

두 번째 줄의 CSS 줄임표: 가능합니까?

CSS에서 text-overflow: 줄임표는 잘린 텍스트를 나타내는 데 널리 사용됩니다. 줄임표(...). 그러나 여러 줄로 구성된 텍스트 블록의 두 번째 줄에 줄임표를 구현하는 것은 오랫동안 어려운 일이었습니다.

이 효과를 얻으려면 텍스트 오버플로에 의존하는 대신 -webkit-line- 사용을 고려할 수 있습니다. 클램프 속성. 이 속성은 블록 컨테이너 내에 표시되는 줄 수를 제한합니다. 이를 display: -webkit-box 및 -webkit-box-orient: Vertical과 결합하면 텍스트를 특정 줄 수로 제한할 수 있습니다. 클리핑을 보장하려면 Overflow: Hidden을 권장합니다.

다음 코드 조각은 이 접근 방식의 예입니다.

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

이 기술은 -webkit 접두사를 활용하여 웹킷 브라우저와 호환됩니다. 그러나 이 특정 조합에 대한 지원은 브라우저 버전에 따라 다를 수 있다는 점은 주목할 가치가 있습니다.

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