> 웹 프론트엔드 > CSS 튜토리얼 > 타원을 사용하여 브라우저 간 호환 가능한 CSS 텍스트 잘림을 어떻게 달성할 수 있습니까?

타원을 사용하여 브라우저 간 호환 가능한 CSS 텍스트 잘림을 어떻게 달성할 수 있습니까?

Linda Hamilton
풀어 주다: 2024-12-24 17:38:10
원래의
922명이 탐색했습니다.

How Can I Achieve Cross-Browser Compatible CSS Text Truncation with Ellipses?

CSS로 긴 문자열 자르기: 브라우저별 오디세이

논리적 너비를 기준으로 서버 측 텍스트를 자르는 것으로 충분할 수 있지만 종종 개별 문자의 폭이 다양하기 때문에 최적이 아닌 결과가 발생합니다. 이상적으로는 렌더링된 텍스트의 물리적 너비를 정확하게 결정할 수 있는 브라우저에서 잘림이 발생해야 합니다.

Internet Explorer의 text-overflow: ellipsis 속성은 이 목표를 정확하게 달성하지만 브라우저 간 호환성이 제한됩니다. Firefox에서는 이 속성에 대한 지원이 부족하므로 개발자는 대체 솔루션을 검색하게 됩니다.

Justin Maxwell의 크로스 브라우저 접근 방식

Justin Maxwell은 크로스 브라우저를 지원하는 CSS 기반 해결 방법을 제공합니다. 브라우저 잘림. 그러나 Firefox에서는 텍스트 선택을 방지한다는 경고가 함께 제공됩니다.

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}
로그인 후 복사

ellipsis.xml Contents

<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
    <binding>
로그인 후 복사

Firefox에서 노드 콘텐츠 업데이트

Firefox에서 이 기술을 처리할 때 발생하는 제한 사항을 해결하려면 다음 코드를 사용하세요. 노드 콘텐츠를 업데이트하는 데 사용할 수 있습니다.

function replaceEllipsis(node, content) {
    node.innerHTML = content;
    // detect gecko browser
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);

        pnode.replaceChild(newNode, node);
    }
}
로그인 후 복사

이러한 기술을 사용하면 개발자는 CSS로 긴 문자열을 효과적으로 잘라서 동적 콘텐츠가 고정 너비 레이아웃에 맞도록 하면서 타원과 같은 사용자 친화적인 시각적 단서를 유지할 수 있습니다. 잘림을 표시합니다.

위 내용은 타원을 사용하여 브라우저 간 호환 가능한 CSS 텍스트 잘림을 어떻게 달성할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿