CSS로 긴 줄을 잘라내는 것 : 아직 실현 가능합니까?

StackOverflow https://stackoverflow.com/questions/802175

문제

일반 HTML 및 CSS로 텍스트를 자르는 좋은 방법이 있으므로 동적 콘텐츠가 고정 된 범위 및 높이 레이아웃에 적합 할 수 있습니까?

나는 서버 측을 잘라 내고있다 논리적 너비 (예 : 맹목적으로 입증 된 문자 수) 그러나 'w'는 'i'보다 넓기 때문에 차선책이되며 또한 모든 문자 수를 다시 추측하고 계속 조정해야합니다. 고정 너비. 이상적으로는 잘린 브라우저에서 잘릴 것입니다. 물리적 인 렌더링 된 텍스트의 너비.

IE에는 a가 있다는 것을 알았습니다 text-overflow: ellipsis 내가 원하는 것을 정확하게하는 속성이지만, 이것을 크로스 브라우저로 만들어야합니다. 이 속성 (다소?) 표준 인 것 같습니다 Firefox는 지원하지 않습니다. 내가 찾았 어 여러 해결 방법 기반 overflow: hidden, 그러나 그들은 타원을 표시하지 않습니다 (사용자가 컨텐츠가 잘 렸는지 알기를 원합니다).

고정 레이아웃에 동적 텍스트를 장착하는 좋은 방법이 있습니까? 아니면 지금까지 얻을 수있는 것만 큼 논리적 인 폭으로 서버 측 잘린 것입니까?

도움이 되었습니까?

해결책

업데이트: text-overflow: ellipsis 이제 지원됩니다 Firefox 7 기준 (2011 년 9 월 27 일 출시). 예! 나의 원래 대답은 역사적 기록으로 이어집니다.

Justin Maxwell에는 크로스 브라우저 CSS 솔루션이 있습니다. 그러나 Firefox에서 텍스트를 선택하지 못하게하는 단점이 있습니다. 체크 아웃 Matt Snider의 블로그에 그의 게스트 게시물 이것이 어떻게 작동하는지에 대한 자세한 내용.

이 기술은 또한 innerHTML Firefox의 속성. 해결 방법은이 게시물의 끝을 참조하십시오.

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/ (JSBIN은 이전 버전의 IE를 지원하기 때문에 사용합니다).

<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 속성은 필요하지 않습니다. 텍스트 오버 플로우 CSS 속성의 동의어이지만 IE 버전은 이미 텍스트 오버 플로우 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의 텍스트 오버 플로우 CSS 속성 만 지원합니다 (2011 년 9 월 27 일 출시).

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

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

참고 : 마우스 호버에 도구가 적용될 때 툴팁을 표시 할 수 있습니다. JavaScript를 통해 수행 할 수 있습니다.이 질문을 참조하십시오. HTML 텍스트 오버 플로우 엘립스 시스 감지 그리고 HTML- 엘립스 시스가 활성화 될 때만 툴팁을 어떻게 표시 할 수 있습니까?

자원:

JavaScript 솔루션으로 괜찮다면 브라우저 크로스 브라우저 방식으로이를 수행 할 jQuery 플러그인이 있습니다. http://azgtech.wordpress.com/2009/07/26/text-overflow-ellelipsis-for-firefox-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)의 원래 기술에 대한 모자

참고로 "버그"추적에 대한 링크가 있습니다. Text-Overflow : Firefox에서의 Ellipsis 지원. Firefox와 같은 소리는 기본 CSS 솔루션을 지원하지 않는 유일한 주요 브라우저입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top