CSS로 긴 문자열 자르기 : 아직 실현 가능합니까?

동적 HTML이 너비와 높이가 고정 된 레이아웃에 맞도록 일반 HTML 및 CSS로 텍스트를 자르는 좋은 방법이 있습니까?

나는 서버 측을 논리적 너비 (예 : 맹목적으로 추측되는 문자 수)만큼 잘랐지만 'w'가 'i'보다 넓기 때문에 차선책이되는 경향이 있으며 다시 추측해야합니다 ( 고정 너비마다 문자 수를 조정하십시오. 브라우저에서 잘림이 발생하는 것이 이상적 이며 렌더링 된 텍스트 의 실제 너비 를 알고 있습니다.

나는 IE가 text-overflow: ellipsis내가 원하는 것을 정확하게 하는 속성을 가지고 있음을 발견 했지만, 이것이 브라우저 간이어야합니다. 이 속성 은 표준으로 보이지만 Firefox에서는 지원하지 않습니다. 에 따라 다양한 해결 방법을 찾았 overflow: hidden지만 줄임표를 표시하지 않거나 (사용자가 내용이 잘렸다는 것을 알기를 원합니다) 내용을 잘랐습니다 (내용이 잘리지 않은 경우에도).

누구든지 고정 레이아웃에 동적 텍스트를 넣는 좋은 방법이 있습니까? 아니면 지금 당장 논리 너비만큼 서버 측 잘림이 있습니까?

업데이트 : text-overflow: ellipsis이제 지원됩니다 Firefox 7 (2011 년 9 월 27 일 릴리스)부터 됩니다. 예이! 내 원래의 대답은 역사적 기록입니다.

Justin Maxwell은 크로스 브라우저 CSS 솔루션을 보유하고 있습니다. 그러나 Firefox에서 텍스트를 선택할 수 없다는 단점이 있습니다. 이것이 작동하는 방법에 대한 자세한 내용은 Matt Snider의 블로그에서 게스트 게시물을 확인하십시오 .

이 기술은 또한 innerHTMLFirefox 의 특성을 사용하여 JavaScript에서 노드의 컨텐츠를 업데이트하지 못하게합니다 . 해결 방법은이 게시물의 끝 부분을 참조하십시오.

CSS

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

ellipsis.xml 파일 내용

<?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 id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>

노드 컨텐츠 업데이트

Firefox에서 작동하는 방식으로 노드의 컨텐츠를 업데이트하려면 다음을 사용하십시오.

var replaceEllipsis(node, content) {
    node.innerHTML = content;
    // use your favorite framework to detect the gecko browser
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);

        pnode.replaceChild(newNode, node);
    }
};

작동 방식에 대한 설명은 Matt Snider의 게시물을 참조하십시오 .

2014 년 3 월 : CSS로 긴 문자열 자르기 : 브라우저 지원에 중점을 둔 새로운 답변

http://jsbin.com/leyukama/1/ 데모 (이전 버전의 IE를 지원하기 때문에 jsbin을 사용합니다).

<style type="text/css">
    span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;     /** IE6+, Firefox 7+, Opera 11+, Chrome, Safari **/
        -o-text-overflow: ellipsis;  /** Opera 9 & 10 **/
        width: 370px; /* note that this width will have to be smaller to see the effect */
    }
</style>

<span>Some very long text that should be cut off at some point coz it's a bit too long and the text overflow ellipsis feature is used</span>

-ms-text-overflow CSS 속성은 필요하지 않습니다. text-overflow CSS 속성의 동의어이지만 6에서 11까지의 IE 버전은 이미 text-overflow CSS 속성을 지원합니다.

웹 브라우저에 대해 Windows OS에서 성공적으로 테스트되었습니다 (Browserstack.com에서).

• IE6에서 IE11로
• 오페라 10.6, 오페라 11.1, 오페라 15.0, 오페라 20.0
• 크롬 14, 크롬 20, 크롬 25
• 사파리 4.0, 사파리 5.0, 사파리 5.1
• Firefox 7.0, Firefox 15

Firefox : Simon Lieschke (다른 답변)에서 지적한 바와 같이 Firefox는 Firefox 7 이후 (2011 년 9 월 27 일 릴리스) 이후의 텍스트 오버 플로우 CSS 속성 만 지원합니다.

Firefox 3.0 및 Firefox 6.0에서이 동작을 다시 확인했습니다 (텍스트 오버플로는 지원되지 않음).

Mac OS 웹 브라우저에서 몇 가지 추가 테스트가 필요합니다.

참고 : 줄임표가 적용될 때 마우스로 가리키면 툴팁을 표시 할 수 있습니다. 이는 자바 스크립트를 통해 수행 할 수 있습니다 .HTML 텍스트 오버플로 줄임표 감지 및 HTML-줄임표가 활성화 된 경우에만 툴팁을 표시하는 방법

자원:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#Browser_compatibility
• http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
• https://stackoverflow.com/a/1101702/759452
• http://www.browsersupport.net/CSS/text-overflow
• http://caniuse.com/text-overflow
• http://msdn.microsoft.com/en-us/library/ie/ms531174(v=vs.85).aspx
• http://hacks.mozilla.org/2011/09/whats-new-for-web-developers-in-firefox-7/

JavaScript 솔루션에 문제가 없다면 브라우저 간 방식으로이를 수행하는 jQuery 플러그인이 있습니다. http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for를 참조하십시오. -firefox-via-jquery /

좋아, Firefox 7 text-overflow: ellipsis뿐만 아니라 구현 했습니다 text-overflow: "string". 최종 출시는 2011-09-27에 계획되어 있습니다.

이 문제에 대한 또 다른 해결책은 다음 CSS 규칙 세트 일 수 있습니다.

.ellipsis{
 white-space:nowrap;
 overflow:hidden;
}

.ellipsis:after{
  content:'...';
}

위의 CSS의 유일한 단점은 텍스트가 컨테이너를 오버플로하는지 여부에 관계없이 "..."을 추가한다는 것입니다. 그럼에도 불구하고 많은 요소가 있고 내용이 넘칠 것이라고 확신하는 경우이 규칙이 더 간단합니다.

내 두 센트 Justin Maxwell의 독창적 인 기술