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

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

CSS를 사용하여 텍스트 길이를 "n"줄로 제한하는 것이 가능합니까(또는 수직으로 오버플로될 때 자릅니다)?

text-overflow: ellipsis;한 줄 텍스트에만 사용할 수 있습니다.

원본 텍스트:

울트라 나토크 무스 매티스, 알리캄, 펠렌테스크의 크라스
alquet, nunction inciduntelit purlucus, 벨루리케눈타요, 소눈소▁t,케.
nuncroncus placeraturna!앉아보세요!우트페나티버스투르피스
꼭 필요한 건트!Dapibus sedaean, Magna sagittis, 로렘 벨리트

원하는 출력(2줄):

울트라 나토크 무스 매티스, 알리캄, 펠렌테스크의 크라스
tinciduntelit puruscentus, 벨타리케루, 레멘튬엘......

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

body {
   margin: 20px;
}

.text {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2; 
   -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-height그리고.max-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>em.

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

이 문제는 수년간 우리 모두를 괴롭혀 왔습니다.

모든 경우에 도움이 되도록 CSS 전용 접근법과 CSS 경고가 문제가 될 경우를 대비하여 jQuery 접근법을 제시했습니다.

여기 제가 생각해 낸 CSS만의 해결책이 있습니다. 모든 상황에서 작동하며 몇 가지 사소한 주의 사항이 있습니다.

기본은 간단하며 스판의 오버플로를 숨기고 유진 Xa가 제안한 라인 높이를 기준으로 최대 높이를 설정합니다.

그 다음에 포함된 div 뒤에 타원을 멋지게 배치하는 유사 클래스가 있습니다.

주의사항

이 솔루션은 필요에 관계없이 생략부호를 항상 배치합니다.

만약 마지막 줄이 끝 문장으로 끝나면, 당신은 네 개의 점으로 끝날 것입니다...

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

줄임표는 텍스트의 오른쪽에 있을 것이며, 이것은 엉성해 보일 수 있습니다.

코드 + 코드 조각

jfiddle

.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 요소를 확인하고 사전 설정된 max var보다 많은 문자가 있으면 나머지를 잘라내고 생략 부호를 추가합니다.

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

.textems의 내부 html을 다시 작성합니다.필요한지 아닌지. 2) 내부 html에 중첩된 요소가 없는지 확인하는 테스트를 수행하지 않으므로 작성자에게 .text를 올바르게 사용할 수 있는 신뢰도가 높습니다.

편집됨

@markzz를 잡아주셔서 감사합니다.

코드 & 스니펫

jfiddle

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(가능하지만 아마도 복잡할 것입니다.

다음 CSS 클래스는 텍스트를 두 줄로 제한하고, 텍스트가 넘친다는 것을 나타내기 위해 생략 부호를 삽입합니다.

.two-line-ellipsis {
  overflow: hidden;
  width: 325px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

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

이것은 나에게 도움이 됩니다.

div {
  width: 200px;
}

p {
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  height: 2.6em; /* Fallback for non-webkit, line-height * 2 */
  line-height: 1.3em;
  -webkit-line-clamp: 2; /* if you change this, make sure to change the fallback line-height and height */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
  </p>
<div>

인라인 스타일을 사용하는 반응 사용자의 경우:

<p
style={{
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    display: '-webkit-box',
    lineClamp: 2,
    WebkitLineClamp: 2,
    WebkitBoxOrient: 'vertical',
}}
>Some Text</p>

.class{
   word-break: break-word;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   line-height: 16px; /* fallback */
   max-height: 32px; /* fallback */
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}

수 할 수 .text-overflow:ellipis-lastline현재 Opera 10.60+에서 공급업체 접두사로 사용할 수 있습니다. 예

저는 잘 작동하는 해결책을 가지고 있지만 대신 줄임말은 경사도를 사용합니다.동적 텍스트가 있을 때 작동하므로 타원이 필요할 정도로 긴지 알 수 없습니다.자바스크립트를 계산할 필요가 없고 테이블 셀을 포함한 가변 너비 컨테이너에 사용할 수 있으며 크로스 브라우저라는 장점이 있습니다.몇 개의 추가 디브를 사용하지만 구현하기가 매우 쉽습니다.

마크업:

<td>
    <div class="fade-container" title="content goes here">
         content goes here
         <div class="fade">
    </div>
</td>

CSS:

.fade-container { /*two lines*/
    overflow: hidden;
    position: relative;
    line-height: 18px; 
    /* height must be a multiple of line-height for how many rows you want to show (height = line-height x rows) */
    height: 36px;
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
}

.fade {
        position: absolute;
        top: 50%;/* only cover the last line. If this wrapped to 3 lines it would be 33% or the height of one line */
        right: 0;
        bottom: 0;
        width: 26px;
        background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}

블로그 게시물: http://salzerdesign.com/blog/ ?p=453

예제 페이지: http://salzerdesign.com/test/fade.html

(거의) 2023년 현재, 일부 오래된 CSS 규칙은 더 이상 필요하지 않습니다.

다음은 필요한 최소 값을 보여주며, 접두사 구문에도 불구하고 브라우저 간에 작동합니다.

.line-clamp   { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; }
.line-clamp-2 { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.line-clamp-3 { overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; }

저는 라인 클램프를 정말 좋아하지만 파이어폭스는 아직 지원하지 않습니다.그래서 저는 수학 계산을 하고 넘쳐나는 것을 숨깁니다.

.body-content.body-overflow-hidden h5 {
    max-height: 62px;/* font-size * line-height * lines-to-show(4 in this case) 63px if you go with jquery */
    overflow: hidden;
}
.body-content h5 {
    font-size: 14px; /* need to know this*/
    line-height:1,1; /*and this*/
}

이제 링크가 있는 jQuery를 통해 이 클래스를 제거하고 추가하려면 추가 픽셀이 필요하므로 최대 높이는 63px가 됩니다. 이는 62px보다 높은지 매번 확인해야 하지만 4줄의 경우 거짓 참이 됩니다.그래서 추가 픽셀은 이것을 고칠 것이고 그것은 추가적인 문제를 만들지 않을 것입니다.

예를 들어, 나는 이것을 위해 커피 스크립트를 붙여넣을 것이고, 기본적으로 숨겨진 링크 두 개를 사용할 것이고, 읽기-쓰기 클래스와 읽기-쓰기 클래스는 오버플로가 필요하지 않은 것을 제거할 것입니다.

jQuery ->

    $('.read-more').each ->
        if $(this).parent().find("h5").height() < 63
             $(this).parent().removeClass("body-overflow-hidden").find(".read-less").remove()
             $(this).remove()
        else
            $(this).show()

    $('.read-more').click (event) ->
        event.preventDefault()
        $(this).parent().removeClass("body-overflow-hidden")
        $(this).hide()
        $(this).parent().find('.read-less').show()

    $('.read-less').click (event) ->
        event.preventDefault()
        $(this).parent().addClass("body-overflow-hidden")
        $(this).hide()
        $(this).parent().find('.read-more').show()

각 항목에 집중하려면letter당신은 그렇게 할 수 있습니다, 저는 이 질문을 참조합니다.

function truncate(source, size) {
  return source.length > size ? source.slice(0, size - 1) + "…" : source;
}

var text = truncate('Truncate text to fit in 3 lines', 14);
console.log(text);

각 항목에 집중하려면word당신은 그렇게 할 수 있습니다 + 공간.

const truncate = (title, limit = 14) => {  // 14 IS DEFAULT ARGUMENT 
    const newTitle = [];
    if (title.length > limit) {
        title.split(' ').reduce((acc, cur) => {
            if (acc + cur.length <= limit) {
                newTitle.push(cur);
            }
            return acc + cur.length;
        }, 0);

        return newTitle.join(' ') + '...'
    }
    return title;
}

var text = truncate('Truncate text to fit in 3 lines', 14);
console.log(text);

각 항목에 집중하려면word공간 없이 + 그렇게 할 수 있습니다.

const truncate = (title, limit = 14) => {  // 14 IS DEFAULT ARGUMENT 
    const newTitle = [];
    if (title.length > limit) {
        Array.prototype.slice.call(title).reduce((acc, cur) => {
            if (acc + cur.length <= limit) {
                newTitle.push(cur);
            }
            return acc + cur.length;
        }, 0);

        return newTitle.join('') + '...'
    }
    return title;
}

var text = truncate('Truncate text to fit in 3 lines', 14);
console.log(text);

긴 이메일을 짧게 줄여야 하는 기간 동안 이 다음 솔루션이 저에게 효과가 있었던 사례가 있었습니다.

.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  overflow-wrap: normal;
}

.word-limit{
   display: block;
   text-overflow: ellipsis;
   white-space: nowrap;
   word-wrap: break-word;
   overflow: hidden;
}

기본 예제 코드, 코드를 배우는 것은 쉽습니다.Style CSS 주석을 선택합니다.

table tr {
  display: flex;
}
table tr td {
  /* start */
  display: inline-block; /* <- Prevent <tr> in a display css */
  text-overflow: ellipsis;
  white-space: nowrap;
  /* end */
  padding: 10px;
  width: 150px; /* Space size limit */
  border: 1px solid black;
  overflow: hidden;
}

<table>
  <tbody>
    <tr>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla egestas erat ut luctus posuere. Praesent et commodo eros. Vestibulum eu nisl vel dui ultrices ultricies vel in tellus.
      </td>
      <td>
        Praesent vitae tempus nulla. Donec vel porta velit. Fusce mattis enim ex. Mauris eu malesuada ante. Aenean id aliquet leo, nec ultricies tortor. Curabitur non mollis elit. Morbi euismod ante sit amet iaculis pharetra. Mauris id ultricies urna. Cras ut
        nisi dolor. Curabitur tellus erat, condimentum ac enim non, varius tempor nisi. Donec dapibus justo odio, sed consequat eros feugiat feugiat.
      </td>
      <td>
        Pellentesque mattis consequat ipsum sed sagittis. Pellentesque consectetur vestibulum odio, aliquet auctor ex elementum sed. Suspendisse porta massa nisl, quis molestie libero auctor varius. Ut erat nibh, fringilla sed ligula ut, iaculis interdum sapien.
        Ut dictum massa mi, sit amet interdum mi bibendum nec.
      </td>
    </tr>
    <tr>
      <td>
        Sed viverra massa laoreet urna dictum, et fringilla dui molestie. Duis porta, ligula ut venenatis pretium, sapien tellus blandit felis, non lobortis orci erat sed justo. Vivamus hendrerit, quam at iaculis vehicula, nibh nisi fermentum augue, at sagittis
        nibh dui et erat.
      </td>
      <td>
        Nullam mollis nulla justo, nec tincidunt urna suscipit non. Donec malesuada dolor non dolor interdum, id ultrices neque egestas. Integer ac ante sed magna gravida dapibus sit amet eu diam. Etiam dignissim est sit amet libero dapibus, in consequat est
        aliquet.
      </td>
      <td>
        Vestibulum mollis, dui eu eleifend tincidunt, erat eros tempor nibh, non finibus quam ante nec felis. Fusce egestas, orci in volutpat imperdiet, risus velit convallis sapien, sodales lobortis risus lectus id leo. Nunc vel diam vel nunc congue finibus.
        Vestibulum turpis tortor, pharetra sed ipsum eu, tincidunt imperdiet lorem. Donec rutrum purus at tincidunt sagittis. Quisque nec hendrerit justo.
      </td>
    </tr>
  </tbody>
</table>

나는 이것을 찾아다녔지만, 그리고 나서 깨달았어, 빌어먹을 내 웹사이트는 php를 사용해!!!텍스트 입력에 트림 기능을 사용하여 최대 길이로 재생하는 것은 어떨까요?

php를 사용하는 사람들에게도 가능한 해결책이 있습니다: http://ideone.com/PsTaI

<?php
$s = "In the beginning there was a tree.";
$max_length = 10;

if (strlen($s) > $max_length)
{
   $offset = ($max_length - 3) - strlen($s);
   $s = substr($s, 0, strrpos($s, ' ', $offset)) . '...';
}

echo $s;
?>

언급URL : https://stackoverflow.com/questions/3922739/limit-text-length-to-n-lines-using-css