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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!