CSS를 사용하여 긴 문자열을 효율적으로 자르고 브라우저 간 호환성을 처리하려면 어떻게 해야 합니까?

CSS로 긴 문자열 자르기: 우수성 달성

HTML 및 CSS로 텍스트를 자르는 것은 난제일 수 있으며, 특히 프레젠테이션 내에서 프레젠테이션을 처리할 때 더욱 그렇습니다. 고정 레이아웃. 논리적 너비를 기반으로 한 서버측 잘림에는 한계가 있으며 최적의 결과를 보장하기 위해 지속적인 조정이 필요한 경우가 많습니다.

그러나 CSS 텍스트 오버플로: 줄임표의 출현으로 이 프로세스에 혁명이 일어났습니다. 현재 주요 브라우저에서 지원되는 이 속성은 넘치는 텍스트를 잘라내고 잘림을 나타내기 위해 줄임표를 추가합니다.

Justin Maxwell은 앞서 언급한 속성을 활용하는 크로스 브라우저 CSS 솔루션을 만들었습니다. Firefox에서 텍스트 선택을 방지하지만 효과적으로 내용을 자르고 원하는 대로 줄임표를 표시합니다.

CSS 구현:

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

Firefox 지원을 위한 XML 바인딩 :

<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></binding></bindings>

노드 콘텐츠 업데이트 Firefox:

Firefox에서 줄임표를 사용하는 노드 콘텐츠를 업데이트하려면 다른 접근 방식이 필요합니다.

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

이 향상된 솔루션을 사용하면 고정 레이아웃에서 동적 텍스트를 자르는 것이 더 이상 어려운 작업이 아닙니다. . 텍스트 오버플로: 줄임표는 간소화된 콘텐츠 표시를 위한 길을 열어 서버 측 추측의 필요성을 없애고 브라우저 간 호환성을 보장합니다.

위 내용은 CSS를 사용하여 긴 문자열을 효율적으로 자르고 브라우저 간 호환성을 처리하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!