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

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

동적 콘텐츠가 고정된 너비 및 높이 레이아웃에 맞게 일반 HTML 및 CSS로 텍스트를 잘라내는 좋은 방법이 있습니까?

논리적 너비(즉, 맹목적으로 추측한 문자 수)로 서버 측을 잘라내고 있지만, 'w'가 'i'보다 넓기 때문에 최적이 아닌 경향이 있으며, 고정된 너비마다 문자 수를 다시 추측(그리고 계속 조정)해야 합니다.렌더링된 텍스트의 물리적 너비를 알고 있는 브라우저에서 잘라내기가 수행되는 것이 이상적입니다.

IE에 다음과 같은 정보가 있다는 것을 발견했습니다.text-overflow: ellipsis 내가 원하는 대로 할 수 있는 속성이지만 크로스 브라우저가 필요합니다.이 속성은 표준(어느 정도?)인 것 같지만 Firefox에서는 지원되지 않습니다.다음을 기반으로 다양한 해결책을 찾았습니다.overflow: hidden), ((에도) 를 합니다.

동적 텍스트를 고정된 레이아웃에 맞출 수 있는 좋은 방법이 있거나 논리적 폭에 따라 서버 측을 잘라내는 방법이 지금만큼 좋은 사람이 있습니까?

업데이트: Firefox 7(2011년 9월 27일 출시) 현재 지원됩니다.예! 저의 원래 대답은 역사적 기록으로 이어집니다.

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

을 업데이트하는 을 방지합니다.innerHTMLFirefox에 있는 속성입니다.해결 방법은 이 게시물의 끝을 참조하십시오.

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);
    }
};

이것이 어떻게 작동하는지에 대한 설명은 매트 스나이더의 게시물을 참고하세요.

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 속성은 필요하지 않습니다. 텍스트 오버플로 CSS 속성의 동의어이지만 6부터 11까지의 IE 버전은 이미 텍스트 오버플로 CSS 속성을 지원합니다.

Windows OS(Browserstack.com 에서 웹 브라우저 테스트 성공:

• IE6 ~ IE11
• 오페라 10.6, 오페라 11.1, 오페라 15.0, 오페라 20.0
• 크롬 14, 크롬 20, 크롬 25
• Safari 4.0, Safari 5.0, Safari 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 솔루션을 사용해도 괜찮으시다면 browser 간에 jQuery 플러그인을 사용하여 이 작업을 수행할 수 있습니다. http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for-firefox-via-jquery/ 을 참조하십시오.

7은 , Firefox 7을 구현했습니다.text-overflow: ellipsis만 아니라.text-overflow: "string"입니다 2011-09-27 은 출시 예정.

이 문제에 대한 또 다른 해결책은 다음과 같은 CSS 규칙 집합일 수 있습니다.

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

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

위 CSS의 유일한 단점은 텍스트 오버플로 여부와 관계없이 "..."를 추가한다는 것입니다.그래도 여러 가지 요소가 있고 콘텐츠가 넘쳐날 것 같은 경우가 있다면 이 규칙이 더 간단할 것입니다.

나의 2센트.저스틴 맥스웰의 독창적인 기술에 맞춰 모자를 벗습니다.

2022년 현재 해당 작업에 대한 새로운 접근 방식이 있는데, 이것은 기본적으로 몇 개의 줄을 유지하고 나머지는 모두 다듬어야 하는지 알려주는 CSS 규칙 줄 클램프입니다.아래 예제에서는 모서리를 끌어서 디브의 치수를 실험할 수 있습니다.

  #resizable { 
  width: 400px; 
  height: 150px; 
  padding: 0 20px; 
  }
  
.wrapper {
border: 1px solid #dddddd;
background: #ffffff;
color: #333333;
position: relative;
}

.slider-text-wrapper p, .slider-text-wrapper .h1 {
    width: 100%;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    box-orient: vertical;
    -webkit-line-clamp: 4;
    -moz-line-clamp: 4;
    -ms-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}
.slider-text-wrapper .h1 {
    -webkit-line-clamp: 2;
    -moz-line-clamp: 2;
    -ms-line-clamp: 2;
    line-clamp: 2;
    font-size: 20px;
    margin: 10px 0;
}

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">

  
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
  
  <script>
  $( function() {
    $( "#resizable" ).resizable();
  } );
  </script>
  
<div id="resizable" class="ui-widget-content wrapper">
<div class="slider-text-wrapper">
<p class="h1">Example headline with surplus of words without any meaning, for just mere demonstration of html and css</p>
<p class="slider-text-intro">Some representative placeholder content for the first slide of the carousel. Some representative placeholder content for the first slide of the carousel. Some representative placeholder content for the first slide of the carousel. Some representative placeholder content for the first slide of the carousel.</p>
</p>
</div>

언급URL : https://stackoverflow.com/questions/802175/truncating-long-strings-with-css-feasible-yet