CSS로 여러 줄 텍스트 줄임표를 구현하는 방법은 무엇입니까?

여러 줄에 텍스트 줄임표 구현

CSS만 사용하면 한 줄 오버플로에 대해 줄임표를 사용하여 텍스트 잘림을 활성화할 수 있지만 이전과 동일한 효과를 얻을 수 있습니다. 여러 줄이 있으면 문제가 발생할 수 있습니다. "두 줄의 텍스트 오버플로 줄임표 [중복]"이라는 질문에서 이 문제를 탐구합니다.

얼핏 보면 text-overflow: ellipsis 및 white-space: nowrap과 같은 CSS 속성의 조합이 텍스트에 충분해 보입니다. 잘림. 그러나 공백: nowrap은 텍스트 줄 바꿈을 방지하여 추가 줄을 위한 충분한 공간에도 불구하고 한 줄에서 텍스트가 잘립니다.

이 제한을 극복하려면 다음 CSS 속성을 고려하세요.

• display: -webkit-box: 유연한 상자 레이아웃 모델을 초기화하여 여러 줄의 텍스트를 허용합니다. text.
• -webkit-line-clamp: 3: 텍스트가 차지해야 하는 최대 줄 수를 정의합니다(이 경우 3).
• -webkit-box-orient: 수직: 상자 레이아웃을 수직으로 지정하여 여러 줄을 활성화합니다. text.
• overflow: Hidden: 지정된 줄을 초과하는 텍스트를 숨깁니다.
• text-overflow: ellipsis: 잘린 텍스트에 줄임표를 추가합니다.

이러한 속성을 사용하면 여러 줄의 텍스트를 구현할 수 있습니다.

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

이 CSS 솔루션을 사용하면 텍스트가 여러 줄로 오버플로되고 지정된 줄 제한에 도달하면 줄임표로 잘릴 수 있습니다.

위 내용은 CSS로 여러 줄 텍스트 줄임표를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!