Обрезка текста в CSS
Необходимо обрезать текст многоточием как на картинке. Количество символов и предложений произвольное. CSS свойство text-overflow: ellipsis; работает только в однострочном режиме.
Магнитное поле ничтожно гасит большой круг небесной сферы, в таком случае эксцентриситеты и наклоны орбит возрастают.
Отслеживать
задан 16 окт 2017 в 8:20
703 2 2 золотых знака 6 6 серебряных знаков 15 15 бронзовых знаков
Каким образом будет задаваться количество слов, после которых надо обрезать?
16 окт 2017 в 8:54
@StepanKasyanenko сколько влезет в блок, видимо
16 окт 2017 в 8:54
@andreymal ну там возможны варианты, не хотелось бы заниматься телепатией)) Хотя я тоже так предпологаю.
16 окт 2017 в 8:55
Английский SO предлагает юзать некрасивые костыли
16 окт 2017 в 8:58
@DaemonHK не понимаю, что вы несёте. Если текст влезает в пять строк, многоточие не нужно. Если текст не влезает в пять строк, многоточие нужно. Влезает текст или нет, знает только браузер. Всё просто.
16 окт 2017 в 9:51
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Возможность сделать такое используя только css есть только у вебкитов и 12й оперы:
p < width: 20em; overflow: hidden; background: antiquewhite; >.webkit < display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; >.opera < line-height: 1.1; height: 3.4em; /* при 3.3 почему-то остаётся 2 строки вместо 3 */ text-overflow: -o-ellipsis-lastline; /* не работает с -webkit-box */ >.both < line-height: 1.1; height: 3.4em; text-overflow: -o-ellipsis-lastline; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; >@supports (text-overflow: -o-ellipsis-lastline) < .both < display: block; >>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
text-overflow
Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие. text-overflow работает в том случае, если для блока значение свойства overflow установлено как auto , scroll или hidden .
Синтаксис
text-overflow: clip | ellipsis
Значения
clip Текст обрезается по размеру области. ellipsis Текст обрезается и к концу строки добавляется многоточие.
HTML5 CSS3 IE Cr Op Sa Fx
text-overflow
Результат данного примера показан на рис. 1.
Рис. 1. Многоточие в конце текста
Браузеры
Opera с версии 9.0 до версии 11.0 использует нестандартное свойство -o-text-overflow .
CSS: Обрезать Текст ✂️
Рассмотрим, как обрезать текст с помощью CSS. Сначала обрежем строку с текстом и добавим многоточие, а затем рассмотрим как обрезать текст по высоте (многострочный текст).
Обрежем текст, если он не помещается в строке.
.crop-line
Обрезать текст по высоте (многострочный текст)
Теперь обрежем многострочный текст до нужного количества строк (например, до четырёх).
.crop-height
Обрезать текст по количеству символов
Для решения данной задачи понадобится JavaScript. Используя код ниже, вы можете выбрать максимальное количество символов и символы на конце обрезки.
(function () < const cropElement = document.querySelectorAll(".crop-text"), // выбор элементов size = 120, // кол-во символов endCharacter = ". "; // окончание cropElement.forEach(el => < let text = el.innerHTML; if (el.innerHTML.length >size) < text = text.substr(0, size); el.innerHTML = text + endCharacter; >>); >());Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
- JavaScript: Работа с Массивами
- Наличие Динамически Добавленного Элемента
- Стилизация Input File
- Предзагрузка Картинок — Предварительная Загрузка Изображений на JavaScript
- Стилизация Скролла
- События Формы
Обрезать текст css: Обрезаем длинную стро… | htmlbook.ru – Как при помощи CSS обрезать длинный текст.
Обрезание текста по вертикали или что делать если текст не влез по высоте / Habr
Если вам это знакомо то прошу под кат.
Совсем недавно наткнулся на такую вот проблему. Длительное гугление если и давало результат то очень половинчатый. В CSS для горизонтального переполнения текстом существует text-overflow но вот его аналога для такого переполнения по вертикали нету. Многие предлагают использовать nowrap в месте с text-overflow но такой подход не универсален и мало кому подходит. Если у нас в блоке произвольный html код то выхода нет. На некоторых известных сайтах так и писали: «Для этой задачи нету решения, старайтесь чтобы в блок влезало целое количество строк». Кроме того некоторые предлагали использовать JS, что так же было не приемлемо.
Такие ответы меня не устроили и после часа размышления ответ был найден. Сразу оговорюсь, я не очень завязан на старые браузеры IE но при этом важна работа в старых iOS. Решение на самом деле очень простое и возможно не требует всего того текста, что я уже написал, но очень хотелось поделится тем более я не видел, что бы кто то это использовал именно так.
Так вот для решения этой задачи мы возьмём css multicolumn на Хабре уже много статей на эту тему.
Предложим у нас есть html:
A Long Message
This is a very long message and will be cut off. This is a very long message and will be cut off.
This is a very long message and will be cut off. This is a very long message and will be cut off.
h3 < font-size: 1.3em; >.box
В этом случае наш текст скорее всего будет разрезан по пополам.
Теперь если мы хотим избавиться от этого эффекта нужно добавить некий wrapper (обёртку):
A Long Message
This is a very long message and will be cut off. This is a very long message and will be cut off.
This is a very long message and will be cut off. This is a very long message and will be cut off.
Вот с таким или стилем:
.wrapper < -webkit-column-width: 150px; //К сожалению тут надо явно указывать размер родительского блока, 100% не работает column-width: 150px; height: 100%; >Собственно и всё… те строки которые не уместились перетекут в следующую колонку, а так как у родительского блока стоит overflow: hidden то мы их не увидим. Минусом такого подхода может быть только скорость отработки этого действия браузером, но она всё равно гораздо быстрее суррогатов на JS. Если волнуетесь по поводу поддержки браузерами то она уже очень хорошая: caniuse.com/multicolumn. Вот работающий пример: jsfiddle.net/4Fpq2/9.
Заранее извиняюсь если это оказалось только для меня открытием.
Свойство text-overflow — добавление троеточия в конец обрезанного текста
Свойство text-overflow добавляет троеточие в конец обрезанного текста в знак того, что текст не помещался в блок и был обрезан.
Для работы свойства текст должен быть обрезан через свойство overflow или свойство overflow-x в значении hidden, auto или scroll. Если задано visible (а так и есть по умолчанию) — text-overflow работать не будет.
Синтаксис
Значения
| Значение | Описание |
|---|---|
| ellipsis | Добавляет в конец обрезанного текста троеточие. |
| clip | Не добавляет троеточие в конец (это значение по умолчанию, нужно для отмены действия свойства при необходимости). |
Значение по умолчанию: clip.
Пример . Вылезающий текст
В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы. Обрезания не происходит:
#elem
Пример . Добавим свойство overflow
Сейчас все, что вылезло за границы контейнера, просто обрежется:
#elem
Пример . Значение ellipsis
Сейчас в дополнение к свойству overflow добавим еще и text-overflow в значении ellipsis. Обрезанному тексту добавится троеточие в конец:
#elem
Пример . С полосами прокрутки
Если задать overflow: auto и text-overflow: ellipsis, то появится полоса прокрутки, но троеточие по-прежнему будет добавлено. Попробуйте прокрутить полосу прокрутки в примере:
Пример . Если нет очень длинных слов
Если нет настолько длинных слов, чтобы они вылазили за границу контейнера, то обрезания не произойдет (ничего же не вылазит). Посмотрите следующий пример:
#elem
Пример . Текст в одну строку
Однако, бывают ситуации, когда мы хотим, чтобы текст обрезался, если он слишком длинный (текст вообще, а не отдельные слова) и не переносился на следующую строку. Это делается с помощью добавления свойства white-space в значении nowrap, которое запретит перенос текста на другую строку. Посмотрите на пример, теперь текст обрезается:
#elem
Пример . Ширина в процентах
Если задать ширину блока в %, то обрезание тоже будет работать корректно:
#elem
Смотрите также
-
свойства word-break и overflow-wrap,
которые позволяют перенести буквы длинного слова на новую строку
Flexbox и обрезание текста
От автора: представим: у нас есть строка текста внутри дочернего элемента flex-контейнера. Вы хотите сделать так, чтобы текст обрезался с добавлением многоточия, а не вел себя, как блоковый элемент (или на крайний случай можно прятать выступающий текст). И вдруг все идет не по плану! Макет не работает, а родительский блок не сжимается. А ведь Flexbox должен был сделать работу с макетом проще!
К счастью есть решение (причем стандартизированное). Для этого придется воспользоваться свойствами, не относящимися к flexbox.
Что мы хотим сделать
GIF изображение показывает, как обрезается текст при уменьшении дочернего элемента.
Возможная проблема
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
GIF изображение показывает, как текст препятствует сжатию родительского блока. Контейнер не просто может не сжиматься, он может стать слишком широким.
Проблема в дочерних элементах (flex-элементах)
Странно… когда текст лежит напрямую внутри дочернего элемента, все работает нормально:
Text to truncate here.
/* Текст напрямую лежит внутри flex-элемента, Который является его оберткой */ .flex-child white-space: nowrap; overflow: hidden; text-overflow: ellipsis; >
/* Текст напрямую лежит внутри flex-элемента,
Который является его оберткой */
Проблема возникает, когда добавляются элементы типа:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Text to truncate here.
Text to truncate here.
/* Теперь текст является заголовком, Чтобы все работало, текст нужно обрезать */ .flex-child > h3
/* Теперь текст является заголовком,
Чтобы все работало, текст нужно обрезать */
Решение – необходимо добавить свойство min-width: 0; к flex-элементу
Или какое-либо другое значение для min-width. Без этого flex-элемент, содержащий другие текстовые элементы внутри себя, не будет сжиматься.
Когда я впервые столкнулся с этой проблемой, я нашел способ Pen by AJ Foster. Автор пишет: «По спецификации текст выше не должен сжаться до нуля, если слишком сильно сжать родительский блок. Так как в классе .subtitle ширина задана на 100%, а min-width: auto, то flexbox делает контейнер больше, чем нам нужно.»
Способ работает в Chrome, Opera и Firefox. В Safari текст обрезался даже без свойства min-width (вопреки спецификации).
Работает: Текст лежит напрямую внутри дочернего элемента
Не работает: Текст в дочернем элементе обернут в тег
Работает: Текст обернут в , но flex-элементу задано свойство min-width
Автор: Chris Coyier
Источник: https://css-tricks.com/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Практика верстки сайта на CSS Grid с нуля
Как ограничить длину текста с помощью css
При разработке сайтов нередки случаи, когда требуется ограничивать длину текста Например, если вы используете дивовую верстку с float: left, в которой высота каждого дива должна быть одинаковой.
Но, представьте, что в этой верстке мы используем заголовок, который имеет непредсказуемую длину. В этом случае, если он будет не влезать в одну строку, то перенесется на следующую. В итоге из-за разного количества строк высота каждого дива может быть разной и верстка распадется.
С помощью стилей мы можем задать любому тексту определенную высоту, зайдя за которую, текст как бы обрезается и общая высота остается одинаковой для всех элементов. Рассмотрим два css метода реализации:
1. Ограничить высоту блока с текстом
Этот метод кроссбраузерный и его часто используют для принудительной обрезки высоты текста. Рассмотрим пример:
С помощью overflow: hidden; обрезается все, что превышает высоту дива в height: 31px; За счет font-size и line-height вы можете регулировать междустрочный интервал и размер шрифта, чтобы в данный див влезало, к примеру ровно две строки.
2. Ограничиваем длину текста с помощью text-overflow
Это дасточно новый метод, который я использую недавно. Он позволяет ограничивать высоту текста по строкам. Рассмотрим пример (только стиль):
Здесь задан класс .zagolovok, который мы можем назначить на любой тег. В итоге, если текст будет больше двух строк, то он автоматически обрежется, а после него пропишется знак многоточия. Количество строк задается с помощью line-clamp. Заметьте, здесь нам не приходится использовать height для принудительного обрезания по высоте.
Так как количество строк будет везде одинаковым, то высота текста также окажется одного размера.