Css обрезать длинный текст: CSS: обрезка текста с многоточием и без — Блог

Leave a Comment / Css / By /

Содержание

о выводе коротких и длинных текстов / Хабр

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

Есть много ситуаций, в которых изменение некоего текстового фрагмента путём добавления или удаления всего одного слова способно заметно изменить внешний вид страницы, или, что ещё хуже «поломать» макет и сделать невозможной нормальной работу с сайтом. Когда я только начинал изучать CSS, я недооценивал последствия, к которым может привести добавление единственного слова в некий элемент или удаление из него всего одного слова. Здесь я хочу поделиться различными способами обработки текстов разной длины средствами CSS.

Обзор проблем

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

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

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

  • Нужно ли в такой ситуации обрезать текст?
  • Нужно ли размещать текст в нескольких строках? Если да — то каково максимальное количество таких строк?
Это — пример того, что происходит, если в некоем элементе выводится такое количество слов, которое превышает количество, на которое рассчитывал разработчик. А что если некое слово просто оказывается очень длинным? Если используются настройки, применяемые по умолчанию, то такое слово просто выйдет за пределы своего контейнера.

Слово вышло за пределы контейнера

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

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

Кнопка, в которой выводится слишком короткий текст, выглядит необычно

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

Что делать? Возможно, стоит настроить свойство кнопки min-width. Благодаря этому она сможет нормально выводить подписи разной длины.

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

Длинные тексты

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

▍Свойство overflow-wrap

Свойство overflow-wrap позволяет сообщить браузеру о том, что он должен разорвать слово, перенеся его на новую строку, в том случае, если слово не помещается в контейнер.

.card {
  overflow-wrap: break-word;
}

Без использования свойства overflow-wrap слово выходит за пределы контейнера

▍Свойство hyphens

Значение auto CSS-свойства hyphens позволяет сообщить браузеру о том, что он должен самостоятельно принять решение о разделении длинных слов с использованием дефиса и о переносе их на новые строки. Это свойство может принимать и значение manual, что позволяет, используя особые символы, предусмотреть возможность и порядок переноса слова на новую строку в том случае, если в этом возникнет необходимость.

.element {
  hyphens: auto;
}

Без использования свойства hyphens браузер не переносит слово на новую строку

Применяя значение auto свойства hyphens важно помнить о том, что браузер будет переносить любое слово, которое не помещается в строку. Что это значит? Взгляните на следующий рисунок.

Браузер может использовать знак переноса в любом слове

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

▍Обрезка однострочного текста

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

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

В CSS нет свойства, которое могло бы называться «text-truncation», применимого для настройки автоматической обрезки текстов. Тут нам понадобится комбинация из нескольких свойств:

.element {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

▍Обрезка многострочного текста

Если нужно обрезать текст, для вывода которого предусмотрено поле, вмещающее несколько строк, нужно прибегнуть к CSS-свойству line-clamp:

.element {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
Для того чтобы это сработало, необходимо использовать и свойство display: -webkit-box. Свойство -webkit-line-clamp позволяет указать максимальное количество строк, по достижении которого текст надо обрезать.

Сравнение обрезки однострочного и многострочного текста

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

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

Настройка свойства padding приводит к нарушению вывода текста

▍Вывод длинных текстов в полях, поддерживающих горизонтальную прокрутку

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

.code {
  overflow-x: auto;
}

Поле, в котором осуществляется перенос слов на новые строки, и поле, в котором применяется горизонтальная прокрутка

▍Свойство padding

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

Проблема при выводе подписи к флажку

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

Короткие тексты

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

▍Установка минимальной ширины элемента

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

Кнопка, в которой выводится слишком короткий текст

Как справиться с проблемой, возникающей при выводе на кнопке очень короткой надписи? Решить эту проблему можно, воспользовавшись свойством min-width. При таком подходе ширина кнопки, даже при выводе в ней короткой надписи, не будет меньше заданного значения.

Результаты настройки минимальной ширины кнопки

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

Практические примеры


▍Карточка профиля пользователя

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

Имя пользователя обычной длины, помещающееся на карточке целиком. Обрезанное длинное имя, выводимое в одной строке. Обрезанное длинное имя, выводимое в нескольких строках

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

/* Решение 1 */
.card__title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
/* Решение 2 */
. card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
Как видите, длинный текст можно обрезать, выведя его либо в одной строке, либо — в нескольких строках.

▍Навигационные элементы

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

Названия навигационных элементов, выведенные на разных языках

Длина слова About из LTR-языка больше, чем длина аналогичного по смыслу слова из RTL-языка. При выводе на таком языке соответствующий пункт навигационного меню выглядит слишком коротким. Известно, что если в дизайне страниц используются маленькие области, с которыми нужно взаимодействовать пользователям, это плохо сказывается на UX. Как исправить проблему? В данном случае можно просто настроить минимальную ширину навигационного элемента:

.nav__item {
  min-width: 50px;
}

Решение проблемы короткого текста

Если вас интересуют вопросы вывода данных на разных языках — взгляните на этот мой материал.

▍Поле для вывода содержимого статей

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

Длинное слово выходит за пределы контейнера

Здесь имеется длинное слово, которое выходит за пределы контейнера и является причиной появления горизонтальной полосы прокрутки. Выше мы уже говорили о решениях подобных проблем, которые заключаются в использовании CSS-свойств overflow-wrap или hyphens.

Например, эту проблему можно решить так:

.article-content p {
  overflow-wrap: break-word;
}

▍Оформление виртуальной корзины для покупок

Названия товаров, которые покупатели интернет-магазинов «кладут» в корзины, могут быть очень разными. Это может быть и одно слово, и несколько строк. В следующем примере длина названия товара такова, что текст перекрывается кнопкой для удаления товара из корзины. Причина этого в том, что при проектировании макета корзины не было уделено достаточного внимания настройке расстояния между элементами.

Вывод коротких и длинных названий в макете, который настроен неправильно

Решить эту проблему можно, настроив внутренние или внешние отступы элементов. Конкретные действия зависят от ситуации. Здесь я приведу простой пример, предусматривающий использование свойства margin-right при настройке элемента, выводящего название товара.

.product__name {
  margin-right: 1rem;
}

▍Flexbox-макеты и вывод длинных текстов

При выводе длинных текстов во Flexbox-макетах возможна ситуация, когда такие тексты переполняют родительские элементы. Взгляните на следующий пример.

Элементы выглядят нормально

Вот разметка к этому примеру:

<div>
  <div>
    <h4>Ahmad Shadeed</h4>
  </div>
  <button>Follow</button>
</div>
Вот стили:

. user {
  display: flex;
  align-items: flex-start;
}
.user__name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
Если имя пользователя не слишком длинно — всё выглядит нормально. Но что случится в том случае, если имя окажется достаточно длинным? В такой ситуации текст переполнит родительский элемент, а это «поломает» макет.

Длинное имя пользователя портит внешний вид страницы

Причина возникновения этой проблемы заключается в том, что размеры Flex-элементов не сокращаются до величин, которые меньше минимального размера их содержимого. Решить эту проблему можно, установив в значение 0 свойство min-width элемента .user__meta:

.user__meta {
  /* другие стили */
  min-width: 0;
}
После этого даже вывод в элементе длинного имени пользователя не испортит макет. Некоторые подробности об использовании свойства min-width при разработке Flexbox-макетов вы можете найти в этом материале.

Итоги

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

Сталкивались ли вы с проблемами, связанными с выводом текстов разной длины на веб-страницах?

Как справляться с коротким и длинным контентом в CSS [часть 2]

Главная | Все статьи | Дневник студента

Время чтения статьи ~2 минуты

Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции

Введение

В этой части мы рассмотрим типовые ситуации, в которых возникает проблема со слишком длинным или слишком коротким контентом.

Примеры

1) Карточка профиля

Простой пример, в котором мы не можем заранее предсказать длину имени. Как же нам тогда поступить?

/* Решение 1 */
.card__title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
/* Решение 2 */
.card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

2) Навигационные элементы

Частая проблема, если делать многоязычный сайт. Иногда возникает ситуация, что какое-то слово (в нашем случае это «About») значительно длиннее при раскладке LTR (left-to-right) чем RTL (right-to-left). Тогда мы получаем слишком маленькую интерактивную зону клика, что не есть хорошо.

Для решения данной ситуации достаточно не забывать использовать min-width.

.nav__item {
  min-width: 50px;
}

3) Продукты в корзине покупателя

Названия продуктов могут варьироваться от одной до нескольких строк. В примере ниже название продукта слишком близко к кнопке «закрыть» из-за недостаточного размера отступов между ними.

Такое обычно решается добавлением margin к внутреннему блоку с текстом или добавлением padding к блоку-обложке.

.product__name {
  margin-right: 1rem;
}

4) Flexbox и длинный контент

Если пример из прошлого пункта показался вам слишком простым, то сейчас вы поймете, что не все вещи бывают такими очевидными. Рассмотрим следующий пример:

HTML:

    Ahmad Shadeed
  Follow

CSS:

.user {
  display: flex;
  align-items: flex-start;
}
.user__name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

Вот что произойдет, если имя станет слишком длинным:

Казалось бы: почему так? Мы ведь сделали все, о чем говорили в первой части данного топика, но получилось совсем не то, чего мы ожидали.

Все дело в том, что по умолчанию флекс-элементы не могут сжиматься меньше длины своего контента. Для решения этой проблемы нужно установить min-width:

.user__meta {
  /* other styles */
  min-width: 0;
}

Онлайн-пример (классы немного отличаются, но суть та же): https://codepen.io/kava13/pen/YzpqLoG

Заключение

Надеюсь, что вы узнали о некоторых методах работы с длинным и коротким контентом. Вы сможете подглядывать сюда и находить какие-то похожие аналоги, когда у вас возникнет неявная ситуация в верстке! 🙂

Александр Ковалец 09 февраля 2021

1

Рекомендуемые программы

профессия

• от 6 300 ₽ в месяц

Фронтенд-разработчик

Разработка фронтенд-компонентов для веб-приложений

10 месяцев •

с нуля

Старт 25 мая

профессия

• от 5 025 ₽ в месяц

Аналитик данных

Сбор, анализ и интерпретация данных

9 месяцев •

с нуля

Старт 25 мая

профессия

• от 6 300 ₽ в месяц

Python-разработчик

Разработка веб-приложений на Django

10 месяцев •

с нуля

Старт 25 мая

профессия

• от 6 300 ₽ в месяц

Java-разработчик

Разработка приложений на языке Java

10 месяцев •

с нуля

Старт 25 мая

профессия

• от 6 300 ₽ в месяц

PHP-разработчик

Разработка веб-приложений на Laravel

10 месяцев •

с нуля

Старт 25 мая

профессия

• от 6 183 ₽ в месяц

Инженер по тестированию

Ручное тестирование веб-приложений

4 месяца •

с нуля

Старт 25 мая

профессия

• от 6 300 ₽ в месяц

Node. js-разработчик

Разработка бэкенд-компонентов для веб-приложений

10 месяцев •

с нуля

Старт 25 мая

профессия

• от 10 080 ₽ в месяц

Fullstack-разработчик

Разработка фронтенд- и бэкенд-компонентов для веб-приложений

16 месяцев •

с нуля

Старт 25 мая

профессия

• от 5 840 ₽ в месяц

Разработчик на Ruby on Rails

Создание веб-приложений со скоростью света

5 месяцев •

c опытом

Старт 25 мая

профессия

Верстальщик

Верстка с использованием последних стандартов CSS

5 месяцев •

с нуля

Старт в любое время

профессия

• от 6 300 ₽ в месяц

Инженер по автоматизированному тестированию на JavaScript

Автоматизированное тестирование веб-приложений на JavaScript

10 месяцев •

с нуля

в разработке

дата определяется

Please enable JavaScript to view the comments powered by Disqus.

переполнение текста | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

Свойство text-overflow в CSS имеет дело с ситуациями, когда текст обрезается, когда он выходит за пределы поля элемента. Его можно обрезать (то есть обрезать, скрыть), отображать многоточие («…», значение диапазона Unicode U+2026) или отображать определенную автором строку (текущий браузер не поддерживает строки, определенные автором).

 .многоточие {
  переполнение текста: многоточие;

  /* Требуется, чтобы text-overflow делал что-либо */
  пробел: nowrap;
  переполнение: скрыто;
}

Обратите внимание, что text-overflow происходит только тогда, когда свойство контейнера overflow имеет значение hidden , scroll или auto и white-space: nowrap; .

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

В следующей демонстрации показано поведение свойства text-overflow , включая все возможные значения. Поддержка браузеров различается!

 Проверьте эту ручку! 
 Установка  overflow  на  scroll  или  auto  отобразит полосы прокрутки для отображения дополнительного текста, а  hidden  не будет. Скрытый текст можно выделить, выбрав многоточие. 
  
 Old Stuff 
 
 В старой версии спецификации говорится, что вы можете использовать URL-адрес изображения для многоточия, но похоже, что это было исключено. 
 
 Существует синтаксис с двумя значениями, например.  переполнение текста: многоточие многоточие;  , который контролировал бы переполнение с левой и правой сторон одного и того же контейнера. Я не уверен, как этого можно достичь. Возможно, текст по центру в слишком маленьком контейнере? В новой спецификации говорится, что это, как и определение строки, «подвержено риску».  
 
 Я не уверен, откуда взялось  многоточие-слово . Этого нет ни в спецификации, ни в какой-либо другой документации, кроме как на WebPlatform.org. 
 
 Свойство  text-overflow   раньше было сокращением  для комбинации  text-overflow-mode  и  text-overflow-ellipsis  , но больше не существует, и этих отдельных свойств не существует. 
 
 Связанные свойства 
  
     
  •   пробел  
    • 
 
  •   переполнение  
    • 
 
  •   разрыв слова  
    • 
 
  •   ширина  
    • 
 
  
 Другие ресурсы 
  
     
  •   W3C  Рекомендация кандидата, спецификация 
    • 
 
  •  Документы MDN 
    • 
 
  •  Документы веб-платформы 
    • 
 
  •  Caniuse.com 
    • 
 
  •  Линия CSS-Tricks Clampin’ 
    • 
 
  •  Управление многострочным многоточием в Pure CSS 
    • 
 
  •  Обрезать строку с многоточием 
    • 
 
  
 Поддержка браузера 
  
  
  Chrome 
  Сафари 
  Фаерфокс 
  Опера 
  ИЭ 
  Андроид 
  iOS 
 
   
  25+ 
  5. 1+ 
  19+ 
  12.1+ 
  IE8+ 
  2.1+ 
  3.2+ 
 
  
  
 Различные способы усечения текста с помощью CSS 
  
   Примечание редактора:  Этот пост был обновлен 5 мая 2023 года, чтобы включить дополнительные примеры усечения текста с помощью CSS и JavaScript, а также включить информацию о последствиях доступности обрезание текста.  

 
 CSS просто фантастический; мы все это знаем. Он имеет множество уникальных функций, которые позволяют нам добиться невероятной скорости отклика в Интернете. Вы когда-нибудь задумывались, как эллипсы  (...) , которые вы видите на некоторых популярных веб-сайтах (как показано на изображении ниже), создаются? 

 
 

 
 Что ж, в этой статье мы рассмотрим, как добиться многострочного усечения в CSS с помощью языка веб-JavaScript. Пойдем! 

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

 
 Садись и наслаждайся поездкой — Поехали! 

 
  Перейти вперед:  

 
     
  •  В чем разница между обрезкой и усечением?
 
       
    •  Обрезка текста 
      • 
 
    •  Усечение текста 
      • 
 
     
    • 
 
  •  Использование CSS  text-overflow  для усечения текста
 
       
    •   Клип  для обрезания однострочного текста 
      • 
 
    •   многоточие  для усечения однострочного текста
 
         
      •  Добавление элемента после многоточия 
        • 
 
       
      • 
 
    •   -webkit-line-clamp  для усечения многострочного текста 
      • 
 
    •  Проблемы при использовании CSS  text-overflow  с Flexbox 
      • 
 
     
    • 
 
  •  Использование JavaScript для усечения текста 
    • 
 
  •  Понимание последствий усечения текста для доступности 
    • 
 
  
 В чем разница между обрезкой и усечением? 
 
 
 Слова «обрезать» и «обрезать» легко спутать, но на самом деле они совершенно разные. В CSS мы не можем сравнивать усечение и обрезку, и это совершенно разные свойства.  

  
 Обрезка текста 
 
 
 На момент написания этой статьи стандарт CSS не включал свойство  text-trim . Изменится ли это в будущем? Возможно, но нет необходимости добавлять эту функциональность в CSS, учитывая, что в JavaScript уже есть метод  String.Prototype.trim() . 

 
 Мы можем использовать метод JavaScript  String.Prototype.trim()  для удаления пробелов в начале и конце строки без изменения исходной строки или контекста CSS текста. Вот пример: 

 
 let myBio = ' Меня зовут Чинеду, и я работаю инженером-программистом. А ты? '
пусть trimedText = myBio.trim()
console.log(тримедтекст)
 
 Усечение текста 
 Усечение часто включает в себя обрезание текста после определенной строки в зависимости от наших потребностей при создании нашего приложения. В большинстве случаев усечение текста в CSS означает добавление многоточия в конце предложения, чтобы указать, что есть еще текст для чтения.
 Усечение во многом противоположно обрезке, например, у нас есть  text-overflow  Доступно свойство CSS, помогающее нам обрезать текст. Мы также можем обрезать текст с помощью JavaScript.
 Использование CSS 
 text-overflow  для усечения текста
 CSS предлагает несколько способов усечения текста. В этой статье мы подробно рассмотрим свойства  text-overflow  и  -webkit-line-clamp .
 Согласно MDN Docs, «CSS-свойство text-overflow определяет, как пользователям сигнализируется скрытое переполнение. Его можно обрезать, отображать в виде многоточия или отображать в виде пользовательской строки». Проще говоря, CSS 9Свойство 0005 text-overflow  используется для указания того, что текст переполнил свой контейнер и скрыт от пользователей.
 В этой статье я рассмотрю два основных свойства CSS для переполнения текста.
  •   зажим 
  •   многоточие 
   N.B.,  есть и другие свойства CSS  text-overflow , такие как  string  ,  initial  и  inherit  . Я не буду описывать их здесь, потому что на момент написания они поддерживаются только в браузерах Firefox и Firefox для Android. Подробнее о них можно прочитать  здесь
 клип  для усечения однострочного текста
  clip  — это значение по умолчанию для свойства CSS  text-overflow . Он усекает текст в контейнере в конце области содержимого. При применении клипа   текст недоступен:
 

<голова>
   <мета-кодировка="UTF-8">
   
   
  Переполнение текста
    <стиль>
       h4 {
           граница: 1px сплошная #2a70a5;
           выравнивание текста: по центру;
            отступ: 5px;
            цвет: #2a70a5;
        }
        .текст-переполнение-клип {
            граница: 2px сплошная #2a70a5;
           отступ: 20px 0;
           пробел: nowrap;
            ширина: 100%;
            переполнение: скрыто;
            переполнение текста: клип;
            размер шрифта: 50px;
        }
    

<тело>
     
Клип
 
    
Lorem Ipsum bụ naanị ederede nke ụlọ ọrụ mbipụta na ụdị mbipụta.  Lorem Ipsum abụrụla akwụkwọ ederede ọkọlọtọ ụlọ ọrụ kemgbe afọ 1500, mgbe onye nbipute amaghi ama were ụdị ụgbọ mmiri wee chịk ọta ya iji mepụta akwụkwọ nlegharị анья. Ọ dịlarị ọ bụghị naanị narị afọ ise, kamakwa ọbịbịa n'ime ụdị elektrọnik, na-agbanwe agbanwebeghị. Эмере я на 1960 сайт на mwepụta nke akwụkwọ Letraset nwere akụkụ Lorem Ipsum, yana n'oge na-adịbeghị anya site na ngwa mbipụta desktọpụ dị ka Aldus PageMaker gụnyere ụdị Лорем Ипсум.



 
 многоточие  для усечения однострочного текста
  многоточие  — еще одно значение свойства CSS  text-overflow ; он обрезает текст и представляет его тремя горизонтальными точками:
 

<голова>
    <мета-кодировка="UTF-8">
   
   
   Переполнение текста
   <стиль>
       h4 {
            граница: 1px сплошная #2a70a5;
            выравнивание текста: по центру;
          отступ: 5px;
           цвет: #2a70a5;
       }
       . текст-переполнение-эллипсы {
            граница: 2px сплошная #2a70a5;
           отступ: 20px 0;
            пробел: nowrap;
            ширина: 100%;
           переполнение: скрыто;
          переполнение текста: многоточие;
           размер шрифта: 50px;
       }
   

<тело>
     
Многоточие
 
   
Lorem Ipsum bụ naanị ederede nke ụlọ ọrụ mbipụta na ụdị mbipụta. Lorem Ipsum abụrụla akwụkwọ ederede ọkọlọtọ ụlọ ọrụ kemgbe afọ 1500, mgbe onye nbipute amaghi ama were ụdị ụgbọ mmiri wee chịk ọta ya iji mepụta akwụkwọ nlegharị анья. Ọ dịlarị ọ bụghị naanị narị afọ ise, kamakwa ọbịbịa n'ime ụdị elektrọnik, na-agbanwe agbanwebeghị. Эмере я на 1960 сайт на mwepụta nke akwụkwọ Letraset nwere akụkụ Lorem Ipsum, yana n'oge na-adịbeghị anya site na ngwa mbipụta desktọpụ dị ka Aldus PageMaker gụnyere ụdị Лорем Ипсум.



 
 Важно отметить, что, хотя свойство  text-overflow  можно использовать для усечения текста, оно не может сделать это само по себе. Вместо этого требуются два дополнительных свойства CSS:
.
  •   белый пробел: nowrap;  : выстраивает текст в прямую строку и не переносит на следующую строку
  •   переполнение: скрыто;  : заставляет текст содержаться в родительском контейнере
 Добавление элемента после многоточия 
 В некоторых ситуациях мне хотелось добавить после многоточия такой элемент, как значок. Но когда линия становится слишком длинной, элемент усекается эллипсами. Задача здесь состоит в том, чтобы элемент оставался после эллипсов.
 Итак, как добавить элемент после многоточия? Допустим, у нас есть следующий HTML:
 <дел>
    <дел>
        Вы изучаете усечение текста с помощью javascript, которое выполняется с помощью этих трех шагов.
<дел> <дел> Вы изучаете усечение текста с помощью javascript, которое выполняется с помощью этих трех шагов.