[css] CSS를 사용하여 텍스트 길이를 n 줄로 제한

CSS를 사용하여 텍스트 길이를 “n”줄로 제한 할 수 있습니까 (또는 세로로 넘칠 때 잘라 내기).

text-overflow: ellipsis; 한 줄짜리 텍스트에서만 작동합니다.

원문 :

Ultrices natoque mus mattis, aliquam,
pellentesque tincidunt elit purus lectus, vel ut aliquet, elementum nunc
nunc rhoncus placerat urna! sed sed! UT penatibus turpis
뮤스 tincidunt! Dapibus sed aenean, 마그나 사지 티스, 로렐 벨리트

원하는 출력 (2 줄) :

Ultrices natoque mus mattis, aliquam,
pellentesque tincidunt elit purus lectus, vel ut aliquet, elementum …



답변

비공식 라인 클램프 구문을 사용하는 방법이 있으며 Firefox 68부터 모든 주요 브라우저에서 작동합니다.

body {
   margin: 20px;
}

.text {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
</div>

당신이 IE의 사용자에 대한 배려하지 않는 한, 할 필요가 없습니다 line-heightmax-height폴백은.


답변

할 수있는 일은 다음과 같습니다.

.max-lines {
  display: block;/* or inline-block */
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em;
  line-height: 1.8em;
}
<p class="max-lines">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae leo dapibus, accumsan lorem eleifend, pharetra quam. Quisque vestibulum commodo justo, eleifend mollis enim blandit eu. Aenean hendrerit nisl et elit maximus finibus. Suspendisse scelerisque consectetur nisl mollis scelerisque.</p>

여기서 max-height:= line-height:× <number-of-lines>in em입니다.


답변

크로스 브라우저 솔루션 작동

이 문제는 몇 년 동안 우리 모두를 괴롭 혔습니다.

모든 경우에 도움이되도록 CSS 전용 접근법과 CSS주의 문제가있는 경우 jQuery 접근법을 배치했습니다.

다음 은 몇 가지 사소한 경고와 함께 모든 상황에서 작동 하는 CSS 전용 솔루션입니다.

기본 사항은 간단하고 스팬 오버플로를 숨기고 Eugene Xa가 제안한 선 높이를 기준으로 최대 높이를 설정합니다.

그런 다음 포함 div 뒤에 생략 부호를 배치하는 의사 클래스가 있습니다.

경고

이 솔루션은 필요에 관계없이 항상 줄임표를 배치합니다.

마지막 줄이 끝 문장으로 끝나면 네 개의 점으로 끝납니다.

정렬 된 텍스트 정렬에 만족해야합니다.

줄임표는 텍스트의 오른쪽에 있으며 느슨해 보일 수 있습니다.

코드 + 스 니펫

jsfiddle

.text {
  position: relative;
  font-size: 14px;
  color: black;
  width: 250px; /* Could be anything you like. */
}

.text-concat {
  position: relative;
  display: inline-block;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em; /* (Number of lines you want visible) * (line-height) */
  line-height: 1.2em;
  text-align:justify;
}

.text.ellipsis::after {
  content: "...";
  position: absolute;
  right: -12px;
  bottom: 4px;
}

/* Right and bottom for the psudo class are px based on various factors, font-size etc... Tweak for your own needs. */
<div class="text ellipsis">
  <span class="text-concat">
Lorem ipsum dolor sit amet, nibh eleifend cu his, porro fugit mandamus no mea. Sit tale facete voluptatum ea, ad sumo altera scripta per, eius ullum feugait id duo. At nominavi pericula persecuti ius, sea at sonet tincidunt, cu posse facilisis eos. Aliquid philosophia contentiones id eos, per cu atqui option disputationi, no vis nobis vidisse. Eu has mentitum conclusionemque, primis deterruisset est in.

Virtute feugait ei vim. Commune honestatis accommodare pri ex. Ut est civibus accusam, pro principes conceptam ei, et duo case veniam. Partiendo concludaturque at duo. Ei eirmod verear consequuntur pri. Esse malis facilisis ex vix, cu hinc suavitate scriptorem pri.
  </span>
</div>

jQuery 접근

제 생각에는 이것이 최고의 솔루션이지만 모든 사람이 JS를 사용할 수있는 것은 아닙니다. 기본적으로 jQuery는 .text 요소를 확인하고 사전 설정된 최대 var보다 많은 문자가 있으면 나머지 부분을 잘라내어 줄임표를 추가합니다.

이 접근법에 대한주의 사항은 없지만이 코드 예제는 기본적인 아이디어를 보여주기위한 것입니다. 두 가지 이유로 개선하지 않고 프로덕션에서는 사용하지 않을 것입니다.

1) .text elems의 내부 HTML을 다시 작성합니다. 필요하든 없든 2) 내부 HTML에 중첩 된 요소가 없는지 확인하는 테스트는 없으므로 저자가 .text를 올바르게 사용하는 데 많은 의존합니다.

편집

캐치 @markzzz 주셔서 감사합니다

코드 및 스 니펫

jsfiddle

setTimeout(function()
{
	var max = 200;
  var tot, str;
  $('.text').each(function() {
  	str = String($(this).html());
  	tot = str.length;
    str = (tot <= max)
    	? str
      : str.substring(0,(max + 1))+"...";
    $(this).html(str);
  });
},500); // Delayed for example only.
.text {
  position: relative;
  font-size: 14px;
  color: black;
  font-family: sans-serif;
  width: 250px; /* Could be anything you like. */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="text">
Old men tend to forget what thought was like in their youth; they forget the quickness of the mental jump, the daring of the youthful intuition, the agility of the fresh insight. They become accustomed to the more plodding varieties of reason, and because this is more than made up by the accumulation of experience, old men think themselves wiser than the young.
</p>

<p class="text">
Old men tend to forget what thought was like in their youth;
</p>
 <!-- Working Cross-browser Solution

This is a jQuery approach to limiting a body of text to n words, and end with an ellipsis -->


답변

내가 볼 수있는 한, 이것은 사용하는 것만 가능 하며 결국 height: (some em value); overflow: hidden에는 멋진 것이 아닙니다 ....

이것이 옵션이 아닌 경우 일부 서버 측 사전 처리 (텍스트 흐름을 안정적으로 예측하기가 어렵 기 때문에) 또는 jQuery (가능하지만 복잡 할 수 있음)가 없으면 불가능하다고 생각합니다.


답변

이 스레드 의 해결책 은 jquery 플러그인 dotdotdot 를 사용하는 입니다. CSS 솔루션은 아니지만 “더 읽기”링크, 동적 크기 조정 등을위한 많은 옵션을 제공합니다.


답변

다음 CSS 클래스는 두 줄의 줄임표를 얻는 데 도움이되었습니다.

  .two-line-ellipsis {
        padding-left:2vw;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 325px;
        line-height: 25px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        padding-top: 15px;
    }


답변

현재는 할 수 없지만 앞으로는를 사용할 수 있습니다 text-overflow:ellipis-lastline. 현재 Opera 10.60+에서 공급 업체 접두사를 사용할 수 있습니다.