CSS에서 두 줄을 넘는 타원을 표시하는 방법

CSS에서는 text-overflow 속성을 사용하여 텍스트 내용이 지정된 영역을 초과할 때 줄임표를 표시하여 페이지를 더욱 아름답게 만들 수 있습니다. 다음은 자세한 소개입니다.

1. text-overflow 속성

CSS의 text-overflow 속성은 요소의 내용이 상자를 넘을 때 수행할 작업을 설정하는 데 사용됩니다. 일반적으로 사용되는 세 가지 값이 있습니다.

• clip: 요소 너비에 맞게 텍스트를 자릅니다. 콘텐츠 뒤의 텍스트를 차단하고 줄임표를 표시하지 않습니다.
• 줄임표: 잘린 텍스트를 나타내기 위해 줄임표(...)를 표시합니다.
• string: 줄임표 문자를 지정된 문자열로 변경합니다.

아래 예에서는 텍스트가 상위 컨테이너를 넘을 때 내용을 축약하기 위해 줄임표가 사용되는 것을 볼 수 있습니다.

div {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

white-space 속성은 요소 내의 공백을 처리하는 방법을 지정하는 데 사용되며, nowrap은 텍스트가 줄 바꿈되지 않음을 의미합니다. Overflow 속성은 요소의 내용이 오버플로될 때 처리 방법을 지정하는 데 사용되며, Hidden은 오버플로된 콘텐츠를 숨긴다는 의미입니다.

2. max-height 속성과 결합

요소에 텍스트가 너무 많은 경우 높이를 제한한 후 텍스트를 사용하면 표시되는 텍스트 줄 수를 제한해야 합니다. 오버플로 속성을 사용하면 타원이 여전히 표시되지 않을 수 있습니다.

그 이유는 텍스트 오버플로가 고정 너비의 블록 수준 요소에서만 작동하기 때문입니다. 따라서 이 문제를 해결하려면 max-height 속성을 결합해야 합니다.

다음 예에서는 요소의 최대 높이를 3줄로 설정했습니다. 텍스트가 3줄을 초과하는 경우 줄임표를 사용하여 내용을 축약합니다.

div {
  width: 150px;
  max-height: 3em;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

그 중 -webkit-line-clamp 속성은 텍스트 줄 수를 지정하는 데 사용되며 -webkit-box-orient 속성은 텍스트 방향을 지정하는 데 사용됩니다.

3. JavaScript와 결합

위 방법은 모두 CSS 스타일 구현을 기반으로 합니다. 기사의 내용을 동적으로 표시하려면 JavaScript와 결합해야 합니다.

요소의 실제 높이와 콘텐츠의 실제 높이를 계산하여 줄임표를 표시해야 하는지 여부를 결정하세요. 다음은 간단한 예입니다.

var element = document.querySelector('.element');
var contentHeight = element.scrollHeight;
var elementHeight = parseInt(getComputedStyle(element).height);

if (contentHeight > elementHeight) {
  element.addEventListener('click', function() {
    this.classList.toggle('expand');
  });
}

이 예에서는 먼저 요소 콘텐츠의 높이와 요소의 실제 높이를 가져옵니다. 콘텐츠 높이가 요소 높이보다 크면 요소에 클릭 이벤트를 추가하고 CSS 스타일을 통해 텍스트를 표시하거나 숨깁니다.

4. 기타 참고 사항

   • 텍스트 오버플로 속성은 너비가 정의된 단일 줄 요소 또는 블록 수준 요소에서만 작동합니다.
   • text-overflow 속성을 사용할 때 공백 속성은 이제 랩되어야 합니다.
   • max-height 속성과 결합 시 공백 속성은 일반이어야 하며 -webkit-line-clamp 속성을 사용하여 줄 수를 지정해야 합니다.
   • 브라우저마다 텍스트 오버플로 속성에 대한 지원이 다를 수 있으므로 주의해서 사용하세요.

일반적으로 text-overflow 속성을 사용하면 페이지를 더욱 아름답게 만들고 기사 내용을 더 잘 표시할 수 있습니다. 이 기사가 도움이 되기를 바랍니다.

위 내용은 CSS에서 두 줄을 넘는 타원을 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!