Как ограничить количество символов css
Перейти к содержимому

Как ограничить количество символов css

  • автор:

Как ограничить длину текста css

Иногда бывает ситуация, когда слишком длинный текст неудобно отображать в блоке на странице, но необходимо дать пользователю информацию о том, текст большой. В данной ситуации используется CSS свойство text-overflow . text-overflow работает в том случае, если для блока c данными, задано значение свойства overflow такое как auto, scroll или hidden и white-space: nowrap. Рассмотрим пример.

Исходный HTML документ:

 class="long-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
.long-text  /* Делаем видиму границу блока и добавляем внутренний отступ */ border: 1px solid #245488; padding: 10px; width: 150px; /* Эти опции - необходимые условия */ overflow: hidden; white-space: nowrap; /* Добавляем троеточия в конце предложения, если текст не помещается в блок */ text-overflow: ellipsis; > 

text-overflow

Результат:

CSS многоточие после нескольких строк

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

text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 300px;

Но все не так просто, если надо обрезать текст после трёх (нескольких) строк. Это можно сделать с помощью javascript, но это будет не самое элегантное решение. Есть другой простой способ – использовать CSS-свойство line-clamp .

CSS-свойство line-clamp помогает подрезать текст на определенное количество строк.

Синтаксис

.module < line-clamp: [none | ]; >

line-clamp может принимать следующие значения:

  • none : не устанавливает ограничение, подрезания строк не будет.
  • : устанавливает максимальное количество строк перед подрезанием содержимого, а затем отображает многоточие (…) в конце последней строки.

А как это сделать с text-overflow ?

Для text-overflow действительно есть значение ellipsis для ограничения текста:

.truncate < text-overflow: ellipsis; /* Нужно, чтобы это заработало */ overflow: hidden; white-space: nowrap; >

Для начала – нормально. Но что, если надо добавить многоточие не в первой строке, а где-нибудь, скажем, в третьей строке текста?

Вот здесь в игру вступает line-clamp . Надо заметить, что для придётся использовать комбинацию из трех свойств:

.line-clamp

Но, есть нюанс…

Это неполная поддержка браузерами. Тут используется префикс -webkit- (который, как ни странно, работает во всех основных браузерах, но это не точно).

Как обычно, уточнить поддержку свойства браузерами можно на странице Caniuse.

Если добавить немного Javascript, например, использовать небольшой скрипт Clamp.js, получится расширить этот список, посмотрите:

Как ограничить количество строк c помощью CSS?

Подскажите как сделать аналог «text-overflow: ellipsis; overflow: hidden;» только для нескольких строк.

Ну то есть есть текст, он в несколько строк с переносами. Необходимо ограничить количество строк в 3 единицы.

Пример:

  • Вопрос задан более трёх лет назад
  • 55278 просмотров

Как ограничить количество символов и поставить троеточие в конце?

Здравствуйте. Есть . Как можно ограничить количество отображаемых на странице символов до, к примеру, 21 и добавить . в конце?

  • Вопрос задан более трёх лет назад
  • 159 просмотров

3 комментария

Простой 3 комментария

Как вариант, задать блоку с текстом некоторую ширину, которая будет меньше ширины текста, запретить перенос слов на новую строку. Дать ему свойства

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus distinctio, assumenda quidem a ipsum inventore at optio reiciendis dicta, velit.

5ec5398d21500586950406.png

Результат:

houseprog

Пример с использованием JavaScript

/** * Функция для сокращения длинного текста * @var object element - элемент, в котором необходимо укоротить текст * @var int count_lit - лимит символов * @var bool light - true|false задать осветление последних символов или нет */ function cutLongString(element, count_lit, light) < // текст в блоке var text = element.html(); // длина текста в блоке var all_len = text.length; // хранилище для нового текста var new_text; // если текст больше заданного лимита, то обрезаем его if (all_len >count_lit)< // обрезаем текст и добавляем три точки в конец new_text = text.substr(0, (count_lit - 3)) + '. '; // если необходимо задать осветление последним символам if(light)< // кусок обычного текста var first_part_text = new_text.substr(0, (count_lit - 10)); // кусок текста, который будет осветлен var light_part_text = new_text.substr((count_lit - 10), count_lit); // переменная, для хранения осветленного текста var light_text = ""; // цвета для последний 10 символов var array_color = ["#444444", "#545454", "#646464", "#747474", "#848484", "#949494", "#a4a4a4", "#b4b4b4", "#c4c4c4", "#d4d4d4"]; // перебираем по одному символу текст, который будет осветлен for(var i = 0; i < 10; i ++)< // оборачиваем каждый символ в span и задаем ему цвет light_text += "" + light_part_text.substr(i, 1) + ""; > // склеиваем две части текста new_text = first_part_text + light_text; > // заменяем текст в блоке element.html(new_text); > >
$(document).ready(function()< // после загрузки страницы вызываем функцию // обрезание с осветлением cutLongString($('.example_div'), 21, true); // обрезание без осветления // cutLongString($('.example_div'), 21, false); >);

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *