Ограничить длину текста до n строк с помощью CSS

Можно ли ограничить длину текста до "n" строк с помощью CSS (или разрезать его при переполнении по вертикали).

text-overflow: ellipsis; работает только для 1 строки текста.

исходный текст:

Ультрисы нации mus mattis, aliquam, cras in pellentesque
tincidunt elit purus lectus, vel ut aliquet, elementum nunc
nunc rhoncus placerat urna! Sit est sed! Ut penatibus turpis
Мысль! Dapibus sed aenean, magna sagittis, lorem velit

требуется выход (2 строки):

Ультрисы нации mus mattis, aliquam, cras in pellentesque
tincidunt elit purus lectus, vel ut aliquet, elementum...

+441
источник поделиться
13 ответов

Есть способ, но это только для webkit. Однако, если вы объедините это с line-height: X; и max-height: X*N;, это также будет работать в других браузерах, только без эллипсов.

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

Demo: http://jsfiddle.net/csYjC/1131/

+519
источник

Что вы можете сделать, это следующее:

.max-lines {
  display: block; /* or inline-block */
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em;
  line-height: 1.8em;
}

где max-height:= line-height: & times; <number-of-lines> в em.

+90
источник
другие ответы

Связанные вопросы


Похожие вопросы

Рабочее межбраузерное решение

Эта проблема преследует нас всех в течение многих лет.

Чтобы помочь во всех случаях, я изложил подход, основанный только на CSS, и подход jQuery на случай, если cssats является проблемой.

Вот решение только для CSS, которое я придумала, которое работает при любых обстоятельствах, с некоторыми незначительными оговорками.

Основы просты: он скрывает переполнение пролета и устанавливает максимальную высоту на основе высоты линии, как это предложил Евгений Ха.

Затем есть псевдокласс после содержащего 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, и если число символов превышает заданное значение max var, оно обрежет все остальные и добавит многоточие.

В этом подходе нет предостережений, однако этот пример кода предназначен только для демонстрации основной идеи - я бы не стал использовать это в производстве, не улучшив его по двум причинам:

1) Он перепишет внутренний html элементов .text. нужен ли или нет. 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 -->

+32
источник

Насколько я могу судить, это возможно только при использовании height: (some em value); overflow: hidden, и даже тогда у него не будет fancy ... в конце.

Если это не вариант, я думаю, что это невозможно без предварительной обработки на стороне сервера (сложно, потому что текстовый поток невозможно предсказать надежно) или jQuery (возможно, но, вероятно, сложно).

+30
источник

Решение этого потока - использовать плагин jquery dotdotdot. Не решение для CSS, но оно дает вам множество возможностей для ссылок "читать больше", динамического изменения размера и т.д.

+15
источник

следующий класс 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;
    }
+9
источник

В настоящее время вы не можете, но в будущем вы сможете использовать text-overflow:ellipis-lastline. В настоящее время он доступен с префиксом поставщика в Opera 10.60+: пример

+5
источник

У меня есть решение, которое работает хорошо, но вместо этого эллипсис использует градиент. Он работает, когда у вас есть динамический текст, поэтому вы не знаете, достаточно ли ему понадобится эллипс. Преимущества заключаются в том, что вам не нужно выполнять какие-либо вычисления JavaScript, и он работает для контейнеров с переменной шириной, включая ячейки таблицы, и является кросс-браузером. Он использует пару дополнительных div, но очень легко реализовать.

Разметка:

<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

+3
источник

Мне очень нравится линейный зажим, но пока нет поддержки firefox.. поэтому я иду с математическим вычислением и просто скрываю переполнение

.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 со ссылкой, вам понадобится дополнительный пиксель, так что максимальная высота будет 63 px, это потому, что вам нужно проверять каждый раз, если высота выше 62 пикселей, но в случае 4 строк вы получите ложную истину, поэтому дополнительный пиксель исправит это и не создаст никаких дополнительных проблем.

Я вставлю coffeescript для этого, чтобы быть примером, использует пару ссылок, которые по умолчанию скрыты, с классами read-more и read-less, они удалят те, которые переполнение не нуждается в этом, и удалить классы переполнения тела

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()
0
источник

Если вы хотите сосредоточиться на каждом 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);

0
источник
.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;
}
0
источник

Базовый пример кода, обучение коду легко. Проверьте комментарии стиля 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>
-1
источник

Я искал для этого, но потом я понимаю, черт возьми, мой сайт использует 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;
?>
-10
источник

Посмотрите другие вопросы по меткам или Задайте вопрос