• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как обрезать длинную строку при помощи CSS (Как при помощи CSS обрезать длинный текст с троеточием)
Как обрезать длинную строку при помощи CSS
Kosten
Дата: Среда, 2020-07-22, 19:34 | Сообщение 1
Оффлайн
Администраторы
Сообщений:28886
Награды: 62


Как известно, что иногда слова, где присутствуют много знаков не сильно вписывают в дизайн, а где то просто его разрушают. И с тем, что все сайты должны быть адаптивны под мобильные телефоны, то с большими знаками, что присутствуют в словосочетаниях нужно что то делать. И здесь можно все красиво обставить, а точнее мы обрезаем те знаки, которые должны вылезти из блока или с формы,и вместо этого автоматически появляется двоеточие. Так сказать такое небольшое недосказанное понятие, что будет отличным вариантом для многих функций.

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



Однострочный текст

Код
  white-space: nowrap; // Выводим текст в одну строку
  overflow: hidden; // Обрезаем то, что выходит за рамки блока
  text-overflow: ellipsis; // Добавляем троеточие вконце текст

Идем далее:

Многострочный текст

Код
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; // Количество строк
  line-height: 20px; // Для поддержки не-вебкит-браузеров, высота одной строки
  max-height: 60px; // Для поддержки не-вебкит-браузеров, высота строки * количество строк

Далее:

Пример реализации обрезания текста в одну и несколько строк:


See the Pen
✂️ Обрезаем длинные строки и добавляем троеточие…
by Kocsten (@kocsten)
on CodePen.


Прикрепления: 0305070.png(12.7 Kb)
Страна: (RU)
Kosten
Дата: Воскресенье, 2020-07-26, 21:25 | Сообщение 2
Оффлайн
Администраторы
Сообщений:28886
Награды: 62


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

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



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



Установка:

HTML

Код
<div class="obrezaem-dlinu">

Описание

</div>


CSS
Код
.obrezaem-dlinu {
    lline-height: 20px;
    opacity: 0.8;
    margin-bottom: 15px;
    padding: 0 12px;
    height: 70px;
    overflow: hidden;
    text-align: justify;
}

Чисто работает по строкам, где можно оставит несколько строк, чтоб красиво и в дизайн вписывалось, а остальные закрыть, но поисковой робот будет читать все, что даже закрыто, так как закрываем не от поиска, а для оформление.
Прикрепления: 5832040.png(17.3 Kb) · 7752526.png(15.9 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как обрезать длинную строку при помощи CSS (Как при помощи CSS обрезать длинный текст с троеточием)
  • Страница 1 из 1
  • 1
Поиск: