Многоточие ('') в CSS после одной или двух строк

Для этого вы можете использовать свойство text-overflow: ellipsis;. Напишите так

white-space: nowrap;
text-overflow: ellipsis;

Я знаю, что немного опоздал с ответом, но я только что написал кусок кода, сообщающий о том, что:

    if ($('your selector').height() > 50) {
        var words = $('your selector').html().split(/\s+/);
        words.push('...');

        do {
            words.splice(-2, 1);
            $('your selector').html( words.join(' ') );
        } while($('your selector').height() > 50);
    }

и, конечно, вы должны сохранить селектор jQuery в переменной, чтобы не запрашивать DOM каждый раз.

Нашел это:

http://codepen.io/martinwolf/pen/qlFdp

Похоже, -webkit-line-clamp работает в некоторых браузерах.

К сожалению, с одним только CSS я не думаю, что вы сможете.

http://jsfiddle.net/TVVHs/

text-overflow: ellipsis; только работает с white-space: nowrap;, что предотвращает появление нескольких строк.

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

когда вам будет разрешено использовать jQuery, вы можете увидеть плагин dotdotdot по этой ссылке .. очень простой в использовании и он отлично работает!

На данный момент я могу предложить вам взглянуть на эту скрипку! сработает text-overflow: ellipsis

После того, как я поигрался с CSS, чтобы придумать "следующее лучшее" ТОЛЬКО решение для CSS, я пришел к следующему:

p.excerpt { position: relative; height: 63px; line-height: 21px; overflow-y: hidden; }
p.excerpt:after { content: '...'; position: absolute; right: 0; bottom: 0; }

Это всегда предполагает, что у вас есть как минимум 3 строки текста, и с этим есть несколько проблем. Если последнее слово, которое нужно перенести в строку 4, очень длинное, между последним словом и многоточием будет необычно большой пробел. Точно так же оно могло перекрывать последнее слово, если оно было чем-то очень, очень маленьким, например "а".

Вы можете добавить еще один контейнер и иметь многоточие за пределами p, и, немного подправив комментарий, я уверен, что кто-то подберет что-нибудь получше.

Надеюсь, что это ответ на ваш вопрос

  @mixin multilineEllipsis(
  $lines-to-show: 2,
  $width: 100%,
  $font-size: $fontSize-base,
  $line-height: 1.6) {

  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: $width;
  height: $font-size * $line-height * $lines-to-show; /* Fallback for non-webkit */
  font-size: $font-size;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

http://codepen.io/martinwolf/pen/qlFdp http://caniuse.com/#search=-webkit-line-clamp

Если вы можете гарантировать, что контент будет перетекать, вот решение, которое я придумал. Это работает для моего сайта, и я хотел, чтобы он был простым.

html:

<p class="snippet">
   [content]
</p>

css:

.snippet {
    position: relative;
    height: 40px; // for 2 lines
    font-size: 14px; // standard site text-size
    line-height: 1.42857; // standard site line-height
    overflow: hidden;
    margin-bottom: 0;
}
.news-insights .snippet:after {
    content: "\02026";
    position: absolute;
    top: 19px;
    right: 0;
    padding-left: 5px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 20%, white); // use vendor prefixes for production code
}

Затем вы можете поиграть с отступом и градиентом фона, чтобы получить более стильную презентацию.

Отображение многоточия нужно обрабатывать по-разному, когда ширина контейнера фиксированная и процентная.

• При фиксированной ширине контейнера

    .nooverflow{
        display: inline-block;
        overflow: hidden;
        overflow-wrap: normal;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

• Когда ширина контейнера выражается в процентах или автоматически, в этом сценарии определите другой тег в этом контейнере для визуализации текста и укажите ширину как 0 и минимальную ширину как 100%, таким образом он будет принимать ширину контейнера и отображать многоточие. Ниже приведен используемый класс LESS:

    .nooverflow{
        display: inline-block;
        overflow: hidden!important;
        overflow-wrap: normal;
        text-overflow: ellipsis;
        white-space: nowrap!important;
        width: 0;
        min-width: 100%;
    }