줄임표를 사용하여 지나치게 긴 HTML 헤더를 어떻게 자를 수 있나요?

과도하게 넓은 HTML 헤더를 자르기 위한 우아한 솔루션

조정 가능한 레이아웃이 있는 동적 웹페이지에서는 다양한 길이의 헤드라인(h2)을 접하는 것이 일반적입니다. 이러한 헤드라인이 브라우저 창 너비를 초과하면 일반적으로 여러 줄로 나누어집니다. 이러한 바람직하지 않은 동작을 방지하기 위해 헤드라인 텍스트를 자르고 여러 줄로 넘칠 경우 줄임표(...)를 삽입하는 정교한 솔루션을 탐색해 보겠습니다.

CSS의 강력한 기능을 사용하여 십자형을 고안할 수 있습니다. -이 잘림을 쉽게 달성하는 브라우저 솔루션입니다. 코드는 다음과 같습니다.

<code class="css">.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}</code>

이 코드는 특정 속성을 가진 "ellipsis"라는 CSS 클래스를 정의합니다.

• white-space: nowrap;: 텍스트를 여러 줄로 줄 바꿈합니다.
• overflow: Hidden;: 요소 너비를 초과하는 텍스트를 숨깁니다.
• text-overflow: ellipsis; 및 -o-text-overflow: ellipsis;: 대부분의 최신 브라우저 및 Opera에서는 잘린 텍스트 끝에 줄임표(...)를 삽입합니다.

이 CSS 클래스를 문제가 있는 h2 요소에 적용하면 해당 요소가 한 줄로 잘리고 텍스트가 넘칠 경우 줄임표가 표시되도록 할 수 있습니다. 이 솔루션은 우아하고 Firefox 6.0을 제외한 모든 주요 브라우저와 호환됩니다. 이전 버전의 Firefox에서는 여러 줄 텍스트 줄 바꿈을 다루는 다른 리소스를 참조할 수 있습니다.

위 내용은 줄임표를 사용하여 지나치게 긴 HTML 헤더를 어떻게 자를 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!