Эллипсис слова CSS ('...') после одной или двух строк

Ответ 1

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

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

Ответ 2

Я знаю, что я немного опоздал с anwser, но я просто написал код кода, который сообщает об этом:

    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.

Ответ 3

Найдено следующее:

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

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

Ответ 4

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

http://jsfiddle.net/TVVHs/

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

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

Ответ 5

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

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

Ответ 6

После того, как вы помогли 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, очень длинное, между последним словом и многоточием будет необычно большое пустое пространство. Точно так же он мог бы перекрывать последнее слово, если бы оно было очень-очень маленьким, как "a".

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

Ответ 7

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

  @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

Ответ 8

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

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
}

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

Ответ 9

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

• Когда ширина контейнера фиксирована.

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