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

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

  • автор:

Усечение многострочного текста с помощью CSS

Для обрезания мы будем использовать только CSS. Это стало немного легче, так как Firefox (начиная с версии 68) начал поддерживать свойство -webkit-line-clamp. Но есть другой способ, который мы сегодня и рассмотрим.

Обновлено: 2023-06-13 20:27:40 Ангелина Писанюк автор материала

Для измерения используем line-height

Допустим, что для элемента задан межстрочный интервал в 1.4rem . При этом нужно убедиться, что в нем выводятся не более трех строк текста. Для этого установите max-height со значением 1.4rem * 3 .

Затем объявим переменную, и используем ее, чтобы установить общий межстрочный интервал (свойство line-height ).

html

Установите максимальную высоту

Усечение текста осуществляется следующим образом.

.truncate-overflow

Добавляем многоточие

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

Если задать элементу свойство position: relative , многоточие можно будет расположить в правом нижнем углу.

.truncate-overflow::before

Я установил многоточие вверху с помощью следующей строки кода: top: calc(var(—lh) * (var(—max-lines) — 1)) . Если текст слишком короткий, свойство overflow: hidden его обрежет.

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

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

Если текст слишком короткий, убираем многоточие

Если длина текста равна значению —max-lines или меньше, его нужно скрыть. Для этого нужно создать маленький блок с таким же цветом, что и фон. Затем установить его поверх многоточия, тем самым спрятав его. Это можно сделать следующим образом:

.truncate-overflow::after < content: ""; position: absolute; right: 0; /* примечание: не используем bottom */ width: 1rem; height: 1rem; background: white; >

Здесь мы не используем свойство bottom. Благодаря этому блок окажется внизу контента, а не внизу относительного родительского элемента.

Сделаем блоки красными, чтобы они стали более заметными.

Если текст слишком короткий, убираем многоточие

Верхний пример содержит больше трех строк, поэтому мы видим многоточие. Во втором примере только две строки, поэтому красный многоточие будет скрыто. Последний пример демонстрирует, что этот способ работает, даже если контент в точности равен значению —max-lines.

Демо

Здесь я хотел использовать логические свойства CSS. Но если нужна поддержка Internet Explorer, придется использовать свойства bottom и right .

Данные о поддержке браузерами взяты из Caniuse .

Chrome: 69 Opera: 62* Firefox: 41 IE: No Edge: 76 Safari: 12.1

Смартфон или планшет

iOS Safari: 12.2-12.3 Opera Mobile: 46* Opera Mini: No Android: 67 Android Chrome: 75 Android Firefox: 67

Как реализовать троеточие при большом размере текст?

cMMGk.jpg

У меня есть множество карточек, в каждом из них должно быть описание, но оно не должно быть больше 3 строчек, иначе выглядит не очень, а описание набирает пользователь (уменьшить описание — не вариант), какие бы я решения не находил — все они работают с 1 блоком, а у меня множество блоков с одинаковым классом, дак ещё и динамически блоки будут добавляться вот картинка блоков (блок описания(стрелочки)) а также это решение должно быть кроссбраузерным

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

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

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

Fernus

AntonLitvinenko

Антон Литвиненко @AntonLitvinenko

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

text-overflow

Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие. text-overflow работает в том случае, если для блока значение свойства overflow установлено как auto , scroll или hidden .

Краткая информация

Значение по умолчанию clip
Наследуется Нет
Применяется К блочным элементам
Анимируется Нет

Синтаксис

text-overflow: clip | ellipsis
Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Значения

clip Текст обрезается по размеру области. ellipsis Текст обрезается и к концу строки добавляется многоточие.

Пример

Результат данного примера показан на рис. 1.

Многоточие в конце текста

Рис. 1. Многоточие в конце текста

Объектная модель

Объект.style.textOverflow

Примечание

Opera до версии 11 использует свойство -o-text-overflow .

Спецификация

Спецификация Статус
CSS Basic User Interface Module Level 3 Редакторский черновик

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

6 12 1 9 11 1.3 7
1.5 7 11 1.3

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

См. также

  • white-space
  • Оформление ссылок

Рецепты

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

Справочник CSS

  • !important
  • ::after
  • ::backdrop
  • ::before
  • ::first-letter
  • ::first-line
  • ::marker
  • ::placeholder
  • ::selection
  • :active
  • :blank
  • :buffering
  • :checked
  • :default
  • :dir
  • :disabled
  • :empty
  • :enabled
  • :first-child
  • :first-of-type
  • :focus
  • :focus-within
  • :fullscreen
  • :hover
  • :in-range
  • :indeterminate
  • :invalid
  • :is()
  • :lang()
  • :last-child
  • :last-of-type
  • :link
  • :muted
  • :not()
  • :nth-child()
  • :nth-last-child()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :paused
  • :placeholder-shown
  • :playing
  • :read-only
  • :read-write
  • :required
  • :root
  • :seeking
  • :stalled
  • :target
  • :valid
  • :visited
  • :volume-locked
  • @charset
  • @document
  • @font-face
  • @import
  • @keyframes
  • @media
  • @page
  • @supports
  • @viewport
  • accent-color
  • align-content
  • align-items
  • align-self
  • all
  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • aspect-ratio
  • backdrop-filter
  • backface-visibility
  • background
  • background-attachment
  • background-blend-mode
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-position-x
  • background-position-y
  • background-repeat
  • background-size
  • block-size
  • border
  • border-block
  • border-block-color
  • border-block-end
  • border-block-end-color
  • border-block-end-style
  • border-block-end-width
  • border-block-start
  • border-block-start-color
  • border-block-start-style
  • border-block-start-width
  • border-block-style
  • border-block-width
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-end-end-radius
  • border-end-start-radius
  • border-image
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-start-end-radius
  • border-start-start-radius
  • border-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • bottom
  • box-decoration-break
  • box-shadow
  • box-sizing
  • caption-side
  • caret-color
  • clear
  • clip
  • color
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • columns
  • content
  • counter-increment
  • counter-reset
  • cursor
  • direction
  • display
  • empty-cells
  • filter
  • flex
  • flex-basis
  • flex-direction
  • flex-flow
  • flex-grow
  • flex-shrink
  • flex-wrap
  • float
  • font
  • font-family
  • font-kerning
  • font-size
  • font-stretch
  • font-style
  • font-variant
  • font-weight
  • gap
  • height
  • hyphenate-character
  • hyphenate-limit-chars
  • hyphens
  • image-rendering
  • justify-content
  • left
  • letter-spacing
  • line-clamp
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • marks
  • max-height
  • max-width
  • min-block-size
  • min-height
  • min-width
  • mix-blend-mode
  • object-fit
  • opacity
  • order
  • orphans
  • outline
  • outline-color
  • outline-offset
  • outline-style
  • outline-width
  • overflow
  • overflow-x
  • overflow-y
  • padding
  • padding-block
  • padding-block-end
  • padding-block-start
  • padding-bottom
  • padding-inline
  • padding-inline-end
  • padding-inline-start
  • padding-left
  • padding-right
  • padding-top
  • page-break-after
  • page-break-before
  • page-break-inside
  • perspective
  • perspective-origin
  • place-content
  • pointer-events
  • position
  • quotes
  • resize
  • right
  • row-gap
  • scroll-behavior
  • tab-size
  • table-layout
  • text-align
  • text-align-last
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-skip-ink
  • text-decoration-style
  • text-emphasis
  • text-emphasis-color
  • text-emphasis-position
  • text-emphasis-style
  • text-fill-color
  • text-indent
  • text-orientation
  • text-overflow
  • text-shadow
  • text-stroke
  • text-stroke-color
  • text-stroke-width
  • text-transform
  • top
  • transform
  • transform-origin
  • transform-style
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • unicode-bidi
  • user-select
  • vertical-align
  • visibility
  • white-space
  • widows
  • width
  • word-break
  • word-spacing
  • word-wrap
  • writing-mode
  • z-index
  • zoom

text — overflow

Свойство text — overflow определяет, как будет обрезаться текст, если он не влезает в доступную область полностью. Работает только если элементу заданы также свойства white — space со значением nowrap и overflow со значением hidden , scroll или auto .

Пример

Скопировать ссылку «Пример» Скопировано

Код ниже обрежет текст, добавив в конце строки многоточие. Также добавлены свойства, без которых text — overflow не сработает:

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Доступны два значения этого свойства:

  • clip — текст обрезается ровно по краю родительского блока.
  • ellipsis — при обрезке текста в конце строки добавляется многоточие «…», показывая незавершённость предложения.

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

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