линейный зажим | CSS-Tricks

Свойство line-зажим обрезает текст на определенное количество строк.

На данный момент его спецификацией является черновик редактора, так что это означает, что здесь ничего не установлено, потому что это незавершенная работа. Тем не менее, он определен как сокращение для max-lines и block-overflow первый из которых отмечен как риск потери в рекомендации кандидата.

Легко увидеть, как max-lines будут отменены, поскольку его функция (установка количества строк перед усечением) уже вставлена ​​в line-зажим и любая дальнейшая абстракция может быть ненужным Но это сбивает нас с пути, поэтому давайте двигаться дальше.

Синтаксис

  .module {
  линейный зажим: [нет|];
}  

line-зажим принимает следующие значения в текущем проекте спецификации:

• нет : не устанавливает максимальное количество строк, и в результате не будет усечения.
• : задает максимальное количество строк перед усечением содержимого и затем отображает многоточие (…) в конце последней строки.

Этот многоточие должно отображаться как символ Юникода (U + 2026), но его можно заменить на эквивалентное в зависимости от языка содержимого и режима записи используемого User-Agent.

Эй, я не могу сделать это с переполнением текста?

Справедливый вопрос, друг мой, и ответ, ну …

(Видите, что я там делал?)

… Сорт .

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

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

  / * Нужно чтобы это работало * /
  переполнение: скрытое;
  пустое пространство: nowrap;
}  

См. Переполнение текста пера Джеффом Грэмом (@geoffgraham) в CodePen.

Отлично, это хорошее начало. Но что, если мы хотим ввести многоточие не в первой строке, а где-нибудь, скажем, в третьей строке текста?

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

  .line-зажим {
  дисплей: -webkit-box;
  -webkit-line-зажим: 3;
  -webkit-box-orient: вертикальный;
  переполнение: скрытое;
}  

См. Линейный зажим Pen (-webkit) Джеффа Грэма (@geoffgraham) на CodePen.

Firefox теперь поддерживает это, именно так (с префиксами -webkit- и всеми).

Так в чем же подвох?

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

Мы можем получить некоторые действия по фиксированию строк с префиксом -webkit- (что, как ни странно, работает во всех основных браузерах). Фактически, именно так и была сделана демонстрация выше.

Мы могли бы пойти по пути JavaScript, если бы захотели. Clamp.js сделает свое дело:

См. Линейный зажим Pen (Clamp.js) Джеффа Грэма (@geoffgraham) в CodePen.

Поддержка браузера

Это поддержка правильности WebKit и недокументированной реализации линейного зажима.

Дополнительные ресурсы