CSS에서 줄임표를 사용하여 여러 줄의 텍스트 오버플로를 달성하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS에서 줄임표를 사용하여 여러 줄의 텍스트 오버플로를 달성하는 방법은 무엇입니까?

Patricia Arquette

풀어 주다： 2024-12-03 09:38:11

원래의

816명이 탐색했습니다.

How to Achieve Multiline Text Overflow with Ellipsis in CSS?

줄임표를 사용한 여러 줄 텍스트 오버플로

CSS에서 text-overflow 속성은 텍스트가 지정된 영역을 초과할 때 텍스트를 자르는 것을 허용합니다. 그러나 기본적으로 이 잘림은 단일 행에서 발생합니다. 때로는 더 많은 내용을 표시하면서 텍스트를 여러 줄로 줄 바꿈하는 것이 바람직할 수 있습니다.

줄임표로 여러 줄 오버플로 달성

이 효과를 얻으려면 , 다음 CSS 속성을 활용할 수 있습니다.

디스플레이: -webkit-box;: 이 속성은 여러 줄을 수용할 수 있는 유연한 컨테이너를 만듭니다.
-webkit-line-clamp: 3;: 허용되는 최대 줄 수를 나타냅니다. 줄임표가 나타나기 전에(예: 세 줄의 경우 3으로 설정) Overflow).
-webkit-box-orient: 수직;: 컨테이너 내에서 줄이 수직으로 쌓이도록 합니다.
overflow: Hidden; : 컨테이너 경계를 벗어나는 텍스트를 숨깁니다.
text-overflow: ellipsis;: 표시되는 마지막 줄 끝에 줄임표(...)를 추가합니다.

사용 예

div {
  width: 300px;
  height: 42px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

로그인 후 복사

함께 이러한 속성이 제자리에 있으면

요소는 필요에 따라 여러 줄로 줄 바꿈됩니다. 그러나 텍스트가 세 번째 줄의 사용 가능한 공간을 초과하면 잘리고 끝에 줄임표가 나타납니다.

참고: 이러한 속성은 WebKit 기반에서만 지원됩니다. Chrome 및 Safari를 포함한 브라우저. 다른 브라우저에는 대체 솔루션이 필요할 수 있습니다.

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