1

Есть текст например:

Оченьдлинныйтекст

Как уменьшить его длину, если текст не помещается на одной строке внутри дива, так чтобы лишнее было заменено на "..."? Например, чтобы стал такого вида:

Оченьдлинн...

2 ответа 2

2

С помощью Javascript, путем обрезки символов.

    var text = "Очень длинный текст. Прям очень очень длинный";
    var croppedText = text.substring(0, 15) + "...";
    alert(croppedText);

Где 15 - число символов. Результат: Очень длинный т...


С помощью Javascript. Без потери слов.

    function truncate(n, useWordBoundary) {
      var isTooLong = this.length > n,
        s_ = isTooLong ? this.substr(0, n - 1) : this;
      s_ = (useWordBoundary && isTooLong) ? s_.substr(0, s_.lastIndexOf(' ')) : s_;
      return isTooLong ? s_ + '...' : s_;
    };

    var s = 'Очень длинный текст. Прям очень очень длинный';
    alert(truncate.apply(s, [15, true]));

Где 15 - число символов. Результат: Очень длинный...


C помощью CSS

.truncate {
  width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="truncate">
  Очень длинный текст. Прям очень очень длинный
</div>

Обрезаем по ширине блока. Результат: Очень длинный...


P.S. В качестве второго примера был взят код: Отсюда. Удачного кодинга...

2

Пример с http://htmlbook.ru/css/text-overflow

p.clip {
    max-width:150px;
    white-space: nowrap; /* Запрещаем перенос строк */
    overflow: hidden; /* Обрезаем все, что не помещается в область */
    background: #fc0; /* Цвет фона */
    padding: 5px; /* Поля вокруг текста */
    text-overflow: ellipsis; /* Добавляем многоточие */
   }
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>text-overflow</title>
 </head>
 <body>
  <p class="clip">Магнитное поле ничтожно гасит большой круг небесной сферы, 
  в таком случае эксцентриситеты и наклоны орбит возрастают.</p>
 </body>
</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.