Ограничить длину текста до n строк, используя CSS - PullRequest
Новая
       75

Ограничить длину текста до n строк, используя CSS

424 голосов
/ 13 октября 2010

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

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

оригинальный текст:

Ultrices natoque mus mattis, aliquam, авария в pellentesque
tincidunt elit purus lectus, Vel ut aliquet, elementum nunc
nunc rhoncus placerat urna!Сиди есть сед!Ut penatibus turpis
mus tincidunt!Dapibus sed aenean, magna sagittis, lorem Velit

желаемый результат (2 строки):

Ultrices natoque mus mattis, aliquam, авария в pellentesque
tincidunt elit puruslectus, vel ut aliquet, elementum ...

Ответы [ 12 ]

0 голосов
/ 21 апреля 2015

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

Я вставлю 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 голосов
/ 03 июня 2013

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