Применение свойства line clamp в CSS для усечения текста синтаксис и примеры кода


Содержание материала:

Зажимные линии без ‘-webkit-line-clamp’

В старые добрые времена существовал трюк в webkit для зажима линий, используя чистый css:

Несмотря на то, что этот синтаксис с радостью сосуществует с синтаксисом display: -webkit-flex , во всех современных браузерах на основе webkit, он считается устаревшим.

Мой вопрос:

Как я могу добиться зажима строки в чистом CSS и без устаревшего трюка ‘-webkit-line-clamp’ ?

Единственное кросс-браузерное решение — использовать js afaik. Несколько решений проблемы многострочного усечения с эллипсисом обсуждаются здесь: http://css-tricks.com/line-clampin/

Я ненавижу их всех, но приветствую веб-разработку.

Синтаксис CSS

Базовые положения

Стили CSS состоят из правил. — указание стиля для тега или класса. В правиле указывается тег, для которого устанавливается стиль, какое именно стилевое свойтво тега вы хотите установить (цвет, позицию и т.д.) и значение это стилевого свойства (имя цвета, координаты и т.д.).

Рис.1. Обычное правило CSS.

Синтаксис записи правила:

  • Объявление берётся в фигурные скобки — <>
  • Свойство и значение разделяются двоеточием — :
  • В одном объявлении может быть указано несколько пар свойство: значение, в конце пары ставится точка с запятой — ;
  • После последнего объявления точку с запятой ставить не обязательно.
  • Синтаксис CSS не чувствителен к регистру символов.
  • Синтаксис CSS не чувствителен пробельным символам (пробелам, табуляции, перенос стоки).

Пример правила CSS:

Рис.2. Пример правила CSS.

В этом примере в качестве селектора использовался тег . Это правило для всего документа задаёт цвет фона в шестнадцатеричном формате.

Имена свойств CSS достаточно просты для понимания и прочитав их практически всегда понятно что они определяют.

В примере ниже создано правило для тега

, объявлены синий цвет, размер 16pt и выравнивание по центру.

Так как синтаксис таблиц CSS не чувствителен к регистру, переносу строк и пробелам, то этот пример можно записать так:

Подобный синтаксис позволяет записывать файлы таблиц стилей в удобном для разработчика виде, максимально читабельно.

Форма записи правил

Для одного селектора можно указать несколько правил, то есть набор объявлений из прошлого примера можно записать ещё и так:

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

Может случиться так, что в в группе объявлений одному свойству по ошибке повторно будет присвоено другое значение, например:

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

будет отображаться красным цветом.

Синтаксис комментариев в CSS

Комментарии в CSS устанавливаются при помощи констукции: /* . */ . Комментарий начинается с комбинации символов /* и заканчивается комбинацией */ .

Следует помнить — вложенные комментарии в CSS недопустимы и их использование приведёт к ошибке. Будьте внимательны когда берёте в комментарий большую часть таблицы CSS, проверьте — нет ли уже в этом блоке комментариев.

-webkit-line-clamp

On this Page

The -webkit-line-clamp CSS property allows limiting of the contents of a block container to the specified number of lines.

It only works in combination with the display property set to -webkit-box or -webkit-inline-box and the -webkit-box-orient property set to vertical .

In most cases you will also want to set overflow to hidden , otherwise the contents won’t be clipped but an ellipsis will still be shown after the specified number of lines.

When applied to anchor elements, the truncating can happen in the middle of the text, not necessarily at the end.

Note: This property was originally implemented in WebKit and has some issues. It got standardized for legacy support. The CSS Overflow Module Level 3 specification also defines a line-clamp property, which is meant to replace this property and avoid its issues.

line-clamp

Easily manage projects with monday.com

The line-clamp property truncates text at a specific number of lines.

The spec for it is currently an Editor’s Draft, so that means nothing here is set in stone because it’s a work in progress. That said, it’s defined as a shorthand for max-lines and block-overflow , the former of which is noted as at risk of being dropped in the Candidate Recommendation.

It’s easy to see how max-lines would be nixed since it’s function (setting the number of lines before truncating) is already baked into line-clamp and any further abstraction might be unnecessary. But that’s getting us off track, so let’s move on.

Syntax

line-clamp accepts the following values in the current draft of the spec:

  • none : sets no maximum on the number of lines and no truncation will happen as a result.
  • : sets the maximum number of lines before truncating the content and then displays an ellipsis (. ) at the end of the last line.

That ellipsis should render as a Unicode character (U+2026) but could be replaced by an equivalent based on the content language and writing mode of the User-Agent being used.

Hey, can’t I do this with text-overflow?

Fair question, my friend, and the answer is, well.


(See what I did there?)

text-overflow does indeed have an ellipsis value that will truncate text:

Nice nice, that’s a good start. But what if we want to introduce the ellipsis not on the first line but somewhere, say, the third line of text?

That’s where line-clamp comes into play. Just note that a combination of three properties are used to make it happen:

Firefox supports this now, exactly this way (with the -webkit- prefixes and all).

So, what’s the catch?

As of right now, it’s browser support. Line clamps are part of the CSS Overflow Module Level 3 which is currently in Editor’s Draft and totally unsupported at the moment.

We can get some line clamping action with a -webkit- prefix (which, weirdly enough, works across all major browsers). In fact, that’s how the demo above was done.

We could go down the JavaScript path if we’d like. Clamp.js will do the trick:

Топ-пост этого месяца:  Pixlr — бесплатный онлайн-фотошоп на русском языке, а так же простые онлайн фоторедакторы

Browser Support

This is the support for WebKit’s propriety and undocumented implementation of line clamp.

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

CSS Syntax and Selectors

Синтаксис CSS

Набор правил CSS состоит из селектора и блока объявлений:

Селектор указывает на элемент HTML, который требуется присвоить стилю.

Блок объявления содержит одно или несколько объявлений, разделенных точками с запятой.

Каждое объявление содержит имя свойства CSS и значение, разделенное двоеточием.

Объявление CSS всегда заканчивается точкой с запятой, а блоки объявлений окружены фигурными скобками.

В следующем примере все элементы

будут выровнены по центру, с красным цветом текста:

Пример

Селекторы CSS

Селекторы CSS используются для «поиска» (или выбора) элементов HTML на основе их имени элемента, идентификатора, класса, атрибута и т.д.

Селектор элементов

Селектор элементов выбирает элементы на основе имени элемента.

Вы можете выбрать все

элементы на странице, как это (в этом случае все

элементы будут выровнены по центру, с красным цветом текста):

Пример

Селектор идентификатора

Селектор идентификаторов использует атрибут ID элемента HTML для выбора конкретного элемента.

Идентификатор элемента должен быть уникальным в пределах страницы, поэтому селектор ID используется для выбора одного уникального элемента!

Чтобы выбрать элемент с определенным идентификатором, напишите символ хэша (#), за которым следует идентификатор элемента.

Правило стиля, приведенное ниже, будет применено к элементу HTML с :

Пример

Примечание: Имя идентификатора не может начинаться с цифры!

Селектор класса

Селектор класса выбирает элементы с определенным атрибутом class.

Чтобы выбрать элементы с определенным классом, напишите символ точки (.), за которым следует имя класса.

В приведенном ниже примере все HTML-элементы с будет красным и center-aligned:

Пример

Можно также указать, что класс может затронуть только определенные элементы HTML.

В приведенном ниже примере только

элементы с будет center-aligned:

Пример

Элементы HTML также могут ссылаться на более чем один класс.

В приведенном ниже примере элемент

будет стилизован в соответствии с классом = «Center» и классом = «Large»:


Пример

This paragraph refers to two classes.

Примечание: Имя класса не может начинаться с числа!

Группирование селекторов

Если у вас есть элементы с одинаковыми определениями стилей, например:

h2 <
text-align: center;
color: red;
>

p <
text-align: center;
color: red;
>

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

In the example below we have grouped the selectors from the code above:

Пример

CSS комментарии

Комментарии используются для объяснения кода и могут помочь при редактировании исходного кода на более позднюю дату.

Комментарии игнорируются браузерами.

CSS комментарий начинается с/* и заканчивается */. Комментарии также могут охватывать несколько строк:

Пример

p <
color: red;
/* This is a single-line comment */
text-align: center;
>

/* This is
a multi-line
comment */

Синтаксис CSS

Определение стиля в CSS, устанавливающего внешний вид для какого-либо элемента на веб-странице — это всего лишь правило, которое сообщает браузеру, что и каким образом будет отформатировано, например изменить цвет текста заголовка, выделить изображение красной рамкой, фиксированная ширина для меню в 200 пикселей и тд.

Правила CSS

CSS представляет из себя правило или набор правил, описывающих форматирование (изменение внешнего вида) отдельных элементов на веб-странице. Правило, состоит из двух частей: селектора и следующим за ним блоком объявлений. На изображении ниже показана структура (синтаксис) правила:

    Первым всегда указывается селектор, он сообщает браузеру, к какому элементу или элементам веб-страницы будет применен стиль.

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

  • Далее следует блок объявлений, который начинается с открывающей фигурной скобки <и заканчивается закрывающей >, между фигурными скобками указываются форматирующие команды (объявления), которые используются браузером для стилизации выбранного селектором элемента. В блоке может быть указано сколько угодно объявлений. Сам блок объявлений так же называют просто стилем.
  • Каждое объявление состоит из двух частей: свойства и его значения. Объявление всегда должно заканчиваться точкой с запятой (;). Опустить указание «;» можно только в конце последнего объявления перед закрывающей фигурной скобкой.
  • Свойство — это команда форматирования, определяющая конкретный стилевой эффект для элемента. Само свойство представляет из себя слово или несколько написанных через дефис слов. Каждое свойство имеет свой предопределенный набор значений. После имени свойства указывается двоеточие, которое отделяет название свойства от допустимого значения.
  • Оформление кода

    Браузер игнорирует большинство пробельных символов в CSS-коде, поэтому их можно использовать с пользой для себя, придавая коду удобочитаемый вид. К пробельным символам относятся: символы табуляции, перенос строки и обычные пробелы, их можно использовать в любом количестве. Пробельные символы можно ставить между селектором и блоком объявлений, в самом блоке объявлений — между фигурной скобкой и свойством, между свойствами, свойством и значением.

    В примере представлен CSS-код, в котором используются пробельные символы:

    Пробельные символы в основном используют, когда в правиле указывается много свойств, чтобы легче было прочитать и представить, что именно делает тот или иной стиль. Код предыдущего примера можно написать и в одну строку, не используя пробельных символов, но такой код будет менее удобен для чтения и понимания:

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

    Синтаксис CSS. Подключение внешних таблиц. Создаем первый стиль

    В первой главе вы узнали, что дизайн сайта создается с помощью CSS. Для лучшего понимания, что и для чего нужно использовать, давайте рассмотрим один наглядный пример. Представьте себе, что HTML – это черно-белый структурированный каркас дома без украшений, а CSS – это то, с помощью чего мы создаем уникальный образ.

    Роль CSS: демонстрация на простом примере

    Как видите, у дома справа появились цвета, материалы и дополнительные украшения. На веб-странице происходит все то же самое: с помощью правил CSS на ней появляются цвета, отступы, меняется стиль шрифтов и размеры элементов, создается целый, завершенный стиль.

    Простая таблица стилей

    Давайте же взглянем, как выглядит самая элементарная таблица стилей и из каких элементов она состоит. Это пример CSS-стиля для всех тегов

    , которые есть на веб-странице:

    Как теперь будет выглядеть текст

    в браузере и что означает каждая строка? Все очень просто: шрифт будет иметь полужирное начертание и цвет #1E824C (шестнадцатеричный код цвета) и отображаться в размере 1em (относительная единица, равная размеру шрифта, который задан по умолчанию в браузере).

    Результат применения CSS

    Синтаксис CSS

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

    Селектор Указывая его, мы говорим браузеру, к чему именно хотим применить стиль. В нашем случае селектором является p . Блок объявлений Так называется всё содержимое, находящееся между фигурными скобками <> после селектора. Стилевое свойство Это команда, с помощью которой указывается желаемый вариант форматирования (например, вы хотите изменить начертание шрифта font-weight , цвет color , размер шрифта font-size и т. д.). После имени свойства необходимо ставить двоеточие. В дальнейшем вы познакомитесь с большим количеством свойств CSS. Значение свойства После двоеточия записывается само значение свойства, которое вы определяете самостоятельно, создавая таким образом собственный стиль. В зависимости от свойства необходимо указывать подходящее ему значение.

    Топ-пост этого месяца:  Плагин для WordPress WPPage отзывы, настройки и функции

    Например, начертание шрифта задается ключевыми словами bold , bolder и т. д., цвет – шестнадцатеричным значением, RGB(A), HSL(A) или ключевыми словами red , orange , white и т. д., размер шрифта – единицами измерения CSS ( процентами % , пикселями px , пунктами pt , высотой шрифта em ) или константами small , medium , large и т. д. После указания значения свойства ставится точка с запятой.


    Поскольку CSS не чувствителен к переносу строк, пробелам, символам табуляции и регистру, вы можете оформлять ваш код так, чтобы в дальнейшем его было удобно читать и править. К примеру, мы могли бы написать вышеприведенный код в одной строке:

    Он тоже работает, но легко ли в нем разобраться? Особенно когда код CSS достаточно длинный. Конечно, не помешало бы разделить его хотя бы пробелами. Существует несколько правил хорошего тона, и если вы сразу выучите их, то в будущем скажете себе «спасибо».

    Очень часто при описании стиля используется компактная форма записи, при которой все свойства для одного селектора указаны в одном блоке:

    А такая форма записи весьма громоздка, хоть и работает:

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

    Для дополнительного удобства можно добавлять комментарии прямо в CSS. В них вы можете писать пояснения, пометки, помогающие ориентироваться в таблицах стилей.

    Комментарии в CSS записываются между символами /* и */ . Они не отображаются на веб-странице в браузере и видны исключительно в коде. Разработчики также часто используют комментарии для того чтобы скрыть временно ненужный участок кода CSS. Выглядят комментарии таким образом:

    Внутренние и внешние таблицы стилей

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

    Внутренние таблицы стилей записываются в HTML-документе между тегами . Нужно добавлять таблицу стилей в каждую веб-страницу. Если на сайте присутствует большое количество страниц, которым необходим одинаковый дизайн, то добавление, а также редактирование стилей становится неблагодарной работой – процесс займет очень много времени. Поэтому внутренние таблицы стилей считаются неудобными.

    Внешние таблицы стилей гораздо более распространены. Вам нужно только подключить таблицу ко всем необходимым веб-страницам, используя тег
    c атрибутом rel (определяет отношение между страницей и подключаемым файлом) и значением stylesheet , которое означает, что в подключаемом файле содержится таблица стилей. Атрибут href – это путь (URL) к вашему файлу .css :

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

    Урок: создаем таблицу стилей

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

    В папке вы найдете HTML-документ с примером простой страницы и изображение (будет использоваться в уроке). Откройте HTML-документ в браузере. Вы увидите, что страница выглядит совершенно обычно. Чтобы придать ей более привлекательный вид, давайте напишем для нее стиль.

    Пока что вам не нужно слишком сильно вникать в то, что означает тот или иной кусок кода. Сейчас вам необходимо понять сам принцип работы. Приступим.

    Подключение CSS к HTML

    Для начала откройте на компьютере любой текстовый редактор (подойдет блокнот) и создайте пустой файл с именем style , сохранив его с расширением .css (должен получиться файл style.css ). Сохраните файл в той папке, где находится загруженный HTML-документ.

    Откройте HTML-документ в текстовом редакторе, а также в браузере (чтобы было удобно просматривать изменения во внешнем виде страницы). Добавьте между тегами следующий код:

    Вкратце о том, что вы только что сделали. Вставив этот код в HTML-документ, вы:

    • указали ссылку на шрифт под названием Roboto Condensed, который будет взят с сервера Google (подробнее о шрифтах Google мы расскажем позже);
    • подключили свою внешнюю таблицу стилей style.css (пока что пустую).

    Пишем стиль CSS

    Сохраните изменения в HTML-документе и перейдите в вами созданный пустой файл .css . Давайте добавим стиль для страницы:

    Сохраните изменения. Поздравляем, вы написали первое правило – оно касается тега . Первое свойство — padding-top — добавит отступ сверху между окном браузера и содержимым веб-страницы в размере 5 пикселей. С помощью второго свойства, background-image , вы подключили изображение для фона всей страницы, указав путь к графическому файлу (находится в той же папке, что и HTML-документ).

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

    Продолжим дальше. Теперь нам необходимо видоизменить содержимое тега . Для этого внесите в таблицу стилей следующий код:

    Сохраните изменения в файле. Сейчас вы:

    • задали область для содержимого тега , которая равна 75% от ширины окна браузера;
    • обеспечили отступ в 40 пикселей от всех сторон области содержимого;
    • расположили область по центру страницы, а также сделали отступ сверху и снизу в 15 пикселей;
    • задали цвет фона #EBEBEB для области содержимого;
    • скруглили углы прямоугольной области, указав радиус скругления 30 пикселей.

    Снова обновите HTML-документ. При этом убедитесь, что кэш отключен либо перезагрузите страницу с обновлением всех связанных с ней файлов, используя специальную комбинацию клавиш (например, для Chrome это Ctrl+F5).

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

    Изменяем шрифт с помощью CSS

    Пора украсить наш текст. Добавьте в таблицу стилей этот код и сохраните изменения:

    Написав это, вы задали цвета шрифтов для тегов h1 , h2 , p , указали их размеры, добавили отступы margin от левого края в 20 пикселей и дополнительно для

    сделали отступ сверху в 20 пикселей и установили интерлиньяж line-height (межстрочный интервал текста) на 50% больше стандартного. К тому же, вы подключили ко всем трём тегам шрифт Roboto Condensed (вот для чего в самом начале необходимо было указать ссылку на него в HTML-файле).

    Топ-пост этого месяца:  Как на главной странице закрепить запись

    Обновите страницу в браузере и полюбуйтесь результатом работы. В этом уроке мы попробуем еще одну вещь. Допишите в CSS этот код:

    Сохранитесь и обновите страницу в браузере. Вы увидите, что в последнем абзаце шрифт в некоторой части текста стал жирным. Чтобы понять, что произошло, перейдите в окно текстового редактора, где в самом начале вы открыли HTML-файл. Взгляните на последний абзац: часть предложения завернута в тег с классом emphasis . Таким образом вы написали стиль для отдельной строки текста в абзаце. Подробнее о классах мы расскажем в следующей главе.

    В конечном итоге у вас должна получиться вот такая страница:

    В качестве тренировки попробуйте изменить размер текста для

    (допустим, 1.1em), а также увеличить отступ между

    и левым краем области содержимого еще на 10 пикселей.

    Выводы

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

    Любой стиль CSS состоит из нескольких элементов: селектора, стилевого свойства и значения этого свойства.

    Все свойства и их значения записываются в блоке объявлений между двумя фигурными скобками <> после указания селектора.

    Нужно внимательно следить за знаками: две фигурные скобки (открывающая в начале блока объявлений и закрывающая в конце). Без этих скобок CSS будет работать некорректно.

    Требуется обязательно ставить двоеточие после свойства и точку с запятой после значения.


    Для удобства и лучшего восприятия кода CSS записывайте каждое свойство в новой строке, а также не скупитесь на пробелы и табуляцию.

    Комментарии CSS записываются между символами /* */ и могут служить для аннотаций, пояснений, а также использоваться в качестве инструмента для временного отключения ненужных участков кода.

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

    CSS – это легко, интересно и увлекательно!

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

    Clamping lines without ‘-webkit-line-clamp’

    In the good old days, there existed a trick in webkit for clamping lines using pure css:

    Though this syntax happily coexists with the display: -webkit-flex syntax, in all modern webkit-based browsers, it is considered obsolete.

    My question is:

    How can I achieve line clamping in pure CSS and without the obsolete ‘-webkit-line-clamp’ trick?

    3 Answers 3

    The only cross-browser solution is to use js afaik. Several solutions to the problem of multi-line truncation with ellipsis are discussed here: http://css-tricks.com/line-clampin/

    I hate them all, but welcome to web development.

    Try using this CSS

    The CSS Overflow Level 3 specification defines a standard line-clamp property (without the quirks the ´-webkit-` prefixed solution has). Unfortunately, non of the main browsers supports this feature yet.

    So, for now you will have to use a polyfill for browsers that don’t support this property. CSS-Tricks describes three solutions, each one having its pros and cons.

    Using standard CSS

    Pros: All current browsers support this. Cons: There’s a fade-out instead of an ellipsis and requires heights to be set manually.

    Using Opera’s -o-ellipsis-lastline value

    Pros: Display as expected. Cons: Only works in old versions of Opera and requires height to be set manually

    Pros: Display as expected and is flexible through different options. Cons: Requires a JS library to work and is less performant than CSS solutions.

    Применение свойства line clamp в CSS для усечения текста: синтаксис и примеры кода

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

    обрезания текста по высоте css

    Решение на CSS для однострочного текста

    Для однострочного текста есть красивое и простое решение на CSS. В этом случае можно использовать свойство text-overflow: ellipsis . При этом контейнер должен иметь свойство overflow равное hidden или clip. Пример:

    Решения на CSS для многострочного текста

    Один из способов обрезки многострочного текста на CSS использует псевдо-элементы :before и :after.

    Краткое описание новости

    Другое решение на CSS использует свойство column-w >. Оно задает ширину колонки для многостраничного текста. Вы уже, наверное, догадались, как мы будем его использовать? Правильно, мы зададим ширину колонки, равную ширине блока, а текст, который не помещается в блок, будет во второй, скрытой колонке:

    Многоточие при таком способе не добавится, но текст не будет резаться посередине строки.

    Интересное решение для многострочного текста на CSS есть для браузеров Webkit. Для этого нужно использовать сразу несколько специфичных свойств с префиксом -webkit:

    Свойство -webkit-line-clamp ограничивает количество строк, выводимых в блоке. Работает красиво и элегантно, но из-за своей специфичности в реальном проекте, конечно, такой прием не может использоваться.

    Решения на JavaScript

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

    Этот же способ можно оформить в виде простенького плагина для jQuery:

    Теперь вызов функции обрезки текста сведется к вызову метода truncateText:

    Что касается решений на JavaScript, нужно помнить, что операции с DOM’ом: вставка элемента, удаление, изменение его содержимого — являются очень тяжелыми. Поэтому с такими хаками нельзя усердствовать.

    Заключение

    Мы привели несколько решений для обрезания произвольного текста как на CSS, так и на JavaScript. Если поддержка браузеров позволяет, лучше выбрать решение на CSS — оно будет быстрее, стабильнее, меньше. Если нет — можно использовать JavaScript, но важно помнить о производительности и применять функцию обрезки текста только действительно в нужных местах.

    Усечение текста и добавление эллипса в CSS

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

    Я попытался использовать свойство CSS text-overflow:ellipsis — однако, глядя на примеры этого, кажется, что это возможно только с использованием no-wrap , и поэтому его можно использовать только в отдельных строках текста, поэтому не подходит для усечение абзаца.

    Затем я придумал еще одно решение, которое почти правильно, но имеет только одну проблему.

    Итак, вместо усечения с использованием свойства ellipsis я укоротил старомодный способ, используя overflow:hidden и установив max-height

    И затем для создания аккуратного многоточия я использовал :after

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

    • overflow:hidden означает, что содержимое :after не отображается. Но это необходимо, поскольку это то, что контролирует усеченный текст!
    • Эллипсис (если вы снимаете overflow:hidden ), отображается под секцией текста. Мне нужно, чтобы он казался частью линейки текста.
    Добавить комментарий