CSS로 긴 문자열을 자르고 브라우저 전체에 줄임표를 표시하려면 어떻게 해야 합니까?

CSS로 긴 문자열 자르기: 크로스 브라우저 솔루션

고정 레이아웃에 맞게 동적 텍스트를 자르는 것은 어려울 수 있습니다. 기본 CSS 속성은 텍스트 자르기 및 줄임표 표시에 대한 브라우저 간 지원을 제공하지 않습니다. 그러나 창의적인 해결 방법을 통해 이 기능을 구현할 수 있습니다.

Justin Maxwell의 Ellipsis Technique

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 파일에는 줄임표 기능을 구현하는 XBL 마크업.

노드 콘텐츠 업데이트

Firefox에서 innerHTML을 사용하여 노드 콘텐츠를 업데이트하면 줄임표 기능이 중단될 수 있습니다. 이 문제를 해결하려면 다음 코드를 사용하세요.

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

        pnode.replaceChild(newNode, node);
    }
}

참고: 텍스트 오버플로: 줄임표는 이제 Firefox 7에서 기본적으로 지원됩니다. 이 업데이트는 환영할만한 개선이지만 크로스-오버플로 브라우저 CSS 솔루션은 이전 브라우저에 대한 유용한 참조로 남아 있습니다.

위 내용은 CSS로 긴 문자열을 자르고 브라우저 전체에 줄임표를 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!