줄임표를 사용하여 H2 태그의 텍스트를 우아하게 자르는 방법은 무엇입니까?

줄임표를 사용하여 HTML 태그에서 텍스트 자르기

반응형 웹 디자인의 세계에서는 콘텐츠가 사용 가능한 수준을 초과하는 상황에 직면하는 것이 일반적입니다. 요소의 너비로 인해 원하지 않는 텍스트 줄바꿈이나 파손이 발생합니다. 동적 텍스트 길이가 있는 제목(h2)의 경우 미학적 문제가 발생할 수 있습니다.

문제:
어떻게 h2 태그 내의 콘텐츠를 우아하게 자르고 줄임표( ...) 텍스트가 화면이나 컨테이너의 사용 가능한 너비를 초과하는 경우?

해결 방법:
다행히 최신 웹 브라우저는 CSS를 사용하여 간단한 크로스 브라우저 솔루션을 제공합니다. 다음 CSS 클래스를 h2 태그에 추가하면 원하는 효과를 얻을 수 있습니다.

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

이 CSS 클래스는 다음 설정을 적용합니다.

• white-space: nowrap 방지 줄 바꿈에서 새 줄로 텍스트를 바꿉니다.
• overflow: Hidden은 사용 가능한 너비를 초과하는 내용을 숨깁니다.
• text-overflow: ellipsis 및 -o-text-overflow: ellipsis(Opera의 경우) ) 잘린 텍스트 끝에 줄임표(...)를 표시합니다.

이 CSS 클래스를 사용하면 h2 태그는 내용을 우아하게 자르고 내용에 비해 너무 넓어지면 줄임표를 추가합니다. 컨테이너. 이 솔루션은 Firefox 6.0을 제외한 모든 주요 브라우저에 유효합니다. 이전 버전의 Firefox에 대한 지원을 받으려면 답변에 언급된 링크된 질문에 제공된 솔루션을 고려하세요.

위 내용은 줄임표를 사용하여 H2 태그의 텍스트를 우아하게 자르는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!