Webkit 브라우저용 CSS에서 여러 줄 줄임표를 어떻게 만들 수 있습니까?

CSS에서 줄임표를 사용한 여러 줄 텍스트 잘림

가독성을 유지하면서 긴 텍스트를 압축해야 하는 필요성은 웹 디자인의 일반적인 과제입니다. . CSS는 줄임표로 텍스트를 자르는 text-overflow 속성을 제공하지만 일반적으로 이는 한 줄 시나리오에 적용됩니다. 텍스트의 두 번째 줄에 줄임표를 적용할 수 있나요?

기술적 딜레마

제공된 예에서 원하는 효과는 줄임표가 텍스트에 나타나는 것입니다. 두 번째 줄. 그러나 기본 동작은 제공된 HTML 마크업의 예시와 같이 첫 번째 줄의 텍스트를 자릅니다.

<p>I hope someone could help me. I need 
an ellipsis on the second line of...</p>

A Solution for Webkit Browsers

CSS는 그렇지 않습니다. 기본적으로 여러 줄 줄임표를 지원하지 않으므로 Webkit 기반 브라우저(예: Safari 및 Chrome)에 대한 해결 방법을 사용할 수 있습니다. 다음 CSS 조각은 원하는 효과를 얻습니다.

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

구현

조각의 CSS 속성은 다음과 같이 함께 작동합니다.

• overflow: 숨김은 지정된 텍스트가 넘치지 않도록 방지합니다. Area.
• text-overflow: ellipsis는 줄임표 잘림을 활성화합니다.
• display: -webkit-box and -webkit-line-clamp: 3 표시되는 텍스트 줄 수를 3개로 제한합니다.
• -webkit-box-orient: 세로로 텍스트 줄 정렬

브라우저 호환성

이 솔루션은 Webkit 브라우저에서만 작동한다는 점에 유의하는 것이 중요합니다. 다른 브라우저에서는 이 접근 방식을 지원하지 않을 수 있습니다. 그러나 지정된 컨텍스트에서 여러 줄 줄임표에 대한 안정적인 방법을 제공합니다.

위 내용은 Webkit 브라우저용 CSS에서 여러 줄 줄임표를 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!