여러 줄 텍스트에 text-overflow : ellipsis를 사용할 수 있습니까?

여러 줄 텍스트에 text-overflow : ellipsis를 사용할 수 있습니까?

---

나는이 p특정와 -tag을 width하고 height. 내가 사용하려는 text-overflow:ellipsis얻을 ...태그의 텍스트가 너무 긴 경우. 여러 줄 텍스트에서 CSS로 해결할 수 있습니까?

---

인터넷 검색은 원격으로 유망한 것도 드러내지 않으므로 불가능하다고 말씀 드리고자합니다.

나는 찾았 text-overflow: -o-ellipsis-lastline지만 Opera에서만 작동합니다 : http://people.opera.com/dstorey/text/text-overflow.html (미러 : http://jsbin.com/exugux/ )

유사한 WebKit 전용 솔루션도 있습니다. http://dropshado.ws/post/1015351370/webkit-line-clamp

---

CSS로 할 수 있습니다. 웹킷 브라우저에서만 작동하지만 다른 브라우저에는 대체 기능이 있습니다.

사용하다 :

display: -webkit-box;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */

와 함께:

max-width: $maxwidth;
overflow: hidden;
text-overflow: ellipsis;

다음은 바이올린입니다. 데모

---

내 솔루션이 의사 요소 및 부동 동작을 포함하는 인기있는 솔루션보다 덜 복잡하다고 생각하기 때문에 이것을 게시하고 있습니다. 나는 최근에 IE7에서 작동하는 솔루션을 만들어야했기 때문에 의사 요소는 처음에는 옵션이 아니 었습니다.

이 기술에는 4 가지 요소가 포함됩니다.

• 콘텐츠의 최대 높이를 결정하는 블록 수준 컨테이너
• 텍스트 콘텐츠에 대한 인라인 래퍼
• 인라인 래퍼에 포함 된 줄임표
• 텍스트 콘텐츠가 컨테이너의 크기를 초과하지 않을 때 줄임표를 가리는 인라인 래퍼 내부의 '채우기'요소

이전 CSS 전용 솔루션과 마찬가지로이 기술은 내용에 대해 단색 배경 또는 고정 위치 배경 이미지를 요구합니다. 줄임표는 텍스트의 일부를 가려야하고 채우기는 줄임표를 가려야합니다. 멋진 그라데이션 효과를 사용하여 텍스트가 줄임표로 희미 해 지도록 할 수 있지만 그 외형적인 세부 사항은 재량에 맡기겠습니다.

HTML 구조

<!-- The block level container. `clamped-2` for 2 lines height -->
<p class="clamped clamped-2">
  <!-- The inline wrapper -->
  <span class="text">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
    lobortis nisl ut aliquip ex ea commodo consequat.
    <!-- The ellipsis, which can contain anything you want - 
         (a 'more' link, for example) -->
    <span class="ellipsis">
      &#133;
    </span>
    <!-- The fill, which covers the ellipsis when the text doesn't overflow -->
    <span class="fill"></span>
  </span>
</p>

CSS

body {
  /* We need a solid background or background-position: fixed */
  background: #fff;
  /* You'll need to know the line height to clamp on line breaks */
  line-height: 1.5;
}

.clamped {
  overflow: hidden;
  position: relative;
}

/* Clamp to 2 lines, ie line-height x 2:
   Obviously any number of these classes can be written as needed
 */
.clamped-2 {
  max-height: 3em;
}

/* The ellipsis is always at the bottom right of the container,
   but when the text doesn't reach the bottom right...
 */
.clamped .ellipsis {
  background: #fff;
  bottom: 0;
  position: absolute;
  right: 0;
}

/* ...It's obscured by the fill, which is positioned at the bottom right 
   of the text, and occupies any remaining space.
 */
.clamped .fill {
  background: #fff; 
  height: 100%;
  position: absolute;
  width: 100%;
}

이를 보여주는 바이올린이 있습니다. 브라우저의 너비를 조정하거나 텍스트를 변경하여 줄임표에서 줄임표 없음으로 이동합니다.

임의의 우아함 요인을 제외하고, 이것은 플로트 (많은 다시 칠해야 함)에 의존하지 않기 때문에 인기있는 솔루션보다 성능이 더 좋다고 생각합니다. 계산할 때 상호 의존성이 없기 때문에 절대 위치 지정이 계산하기가 훨씬 더 간단합니다. 형세.

---

여러 줄 줄임표 문제를 해결하기 위해 자바 스크립트 함수를 작성했습니다.

function ellipsizeTextBox(id) {

    var el = document.getElementById(id);
    var keep = el.innerHTML;
    while(el.scrollHeight > el.offsetHeight) {
        el.innerHTML = keep;
        el.innerHTML = el.innerHTML.substring(0, el.innerHTML.length-1);
        keep = el.innerHTML;
        el.innerHTML = el.innerHTML + "...";
    }   
}

도움이 되었기를 바랍니다!

---

여러 줄의 브라우저 간 순수 CSS 줄임표에 대한 해결책을 찾았습니다. 많은 솔루션을 시도했지만 CSS 만 사용하여 해결되었습니다. 동적 너비가있는 div가 있고 높이를 설정해야했습니다.

링크 : http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/

---

user1152475에 의해 기능이 수정되어 문자 단위가 아닌 단어 단위 (공백 구분)로 작동합니다.

function ellipsizeTextBox(id) {
    var el = document.getElementById(id);
    var wordArray = el.innerHTML.split(' ');
    while(el.scrollHeight > el.offsetHeight) {
        wordArray.pop();
        el.innerHTML = wordArray.join(' ')  + '...';
    }   
}

두 솔루션 모두 상자의 높이가 설정되어 있어야합니다.

---

HTML은 그러한 기능을 제공하지 않으며 이것은 매우 실망 스럽습니다.

이것이 제가이 문제를 다루기 위해 작은 도서관을 개발 한 이유입니다. 라이브러리는 문자 수준의 텍스트 렌더링을 모델링하고 수행하기위한 개체를 제공합니다. 필요한 작업을 수행해야합니다.

http://www.samuelrossille.com/home/jstext 에서 스크린 샷, 자습서 및 dowload 링크에 대해 자세히 알아보십시오 .

---

앞서 지적했듯이 David DeSandro가 게시 한 webkit-box로이를 수행하는 이상한 방법이 있습니다.

  elements_to_style {
      display: -webkit-box;
      overflow : hidden;
      text-overflow: ellipsis
      -webkit-line-clamp: number_of_lines_you_want;
      -webkit-box-orient: vertical;
  }

링크 http://dropshado.ws/post/1015351370/webkit-line-clamp

---

누군가 여기에 도달 할 경우에 대비해 이것이 당신을위한 해결책일까요? 순수한 CSS 크로스 브라우저. http://codepen.io/issactomatotan/pen/LkJbjO

<div style="position:relative;width:100%;max-height:40px;overflow:hidden;font-size:16px;line-height:20px;border:1px solid red;">
<p class="pp">asd asdasd asd asd asdasd a asdasd a sdasd asdasd asdaasd asd asd d asasas das dasdd asddasd asdasd asdsdasd asd<span class="bb"></span></p>

---

나는 이러한 솔루션의 대부분을 만졌고 가장 좋은 방법은 solid clamp.js 플러그인 을 사용하는 것 입니다. 모든 환경에서 작동하며 작은 크기 (3K)가 축소됩니다.

---

.minHeightg{
height:5.6rem !important;
  width:20%;
}
.productOverflow
{
     overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   line-height: 16px;     /* fallback */
   max-height: 3.6rem;      /* fallback */
   -webkit-line-clamp: 3; /* number of lines to show */
   -webkit-box-orient: vertical;
}



/*firefox*/
@-moz-document url-prefix() {
   
   .productOverflow
{
   overflow: hidden;
   text-overflow:ellipsis;
   display: -moz-box !important;
   
   line-height: 16px;     /* fallback */
   max-height: 3.6rem;      /* fallback */
   -moz-line-clamp: 3; /* number of lines to show */
   -moz-box-orient: vertical;
}

<div class="minHeightg">
    <p class="productOverflow">Some quick example text to build on the card title .</p>
    </div>

---

CSS를 사용하여 이런 식으로 할 수 있습니다.

Chrome 및 Safari 용

.block-with-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
}

Firefox 및 Internet Explorer의 경우

* styles for '...' */ 
.block-with-text {
  /* hide text if it more than N lines  */
  overflow: hidden;
  /* for set '...' in absolute position */
  position: relative; 
  /* use this value to count block height */
  line-height: 1.2em;
  /* max-height = line-height (1.2) * lines max number (3) */
  max-height: 3.6em; 
  /* fix problem when last visible word doesn't adjoin right side  */
  text-align: justify;  
  /* place for '...' */
  margin-right: -1em;
  padding-right: 1em;
}
/* create the ... */
.block-with-text:before {
  /* points in the end */
  content: '...';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of block */
  right: 0;
  bottom: 0;
}
/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
  /* points in the end */
  content: '';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of text */
  right: 0;
  /* set width and height */
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  /* bg color = bg color under block */
  background: white;
}

참고URL : https://stackoverflow.com/questions/6572330/is-it-possible-to-use-text-overflowellipsis-on-multiline-text