Display webkit box: -webkit-box- как работает? — Хабр Q&A

line-clamp | CSS | WebReference

Ограничивает текст заданным числом строк. Если текст превышает указанное число строк, то текст обрезается и в конце добавляется многоточие.

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

Синтаксис

line-clamp: none | <число>

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

Значения

none

Содержимое никак не ограничивается.

<число>

Содержимое ограничивается указанным числом строк.

Пример

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

Объект.style.lineClamp

Примечание

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

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

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

Браузеры

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

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

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

Текст и шрифт

Рецепты

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

Справочник CSS

Значения свойств

Функции

Единицы CSS

Типы элементов

CSS: line-clamp — Еще один блог веб-разработчика

Spread the love

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

Спецификация для него в настоящее время находится в статусе Working Draft (WD) — рабочий черновик, так что это означает, что все еще здесь ничего не высечено на камне, потому что работа над ней до конца еще не завершена. Тем не менее, он определяется как сокращение для max-lines и block-overflow, первое из которых отмечено как находящееся под угрозой удаления в текущем рекомендации-кандидате (Candidate Recommendation).

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

Syntax

 .module {
  line-clamp: [none | <integer>];
}

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

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

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

Эй, я могу сделать это с помощью text-overflow?

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

text-overflow действительно имеет значение ellipsis, которое обрезает текст:

.truncate {
  text-overflow: ellipsis;
  /* Needed to make it work */
  overflow: hidden;
  white-space: nowrap;
}

Красивая картинка, для хорошего старта. Но что, если мы хотим ввести многоточие не в первую строку, а где-то, скажем, в третью строку текста?

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

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

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

Итак, в чем подвох?

На данный момент это поддержка браузера. Line clamps являются частью CSS Overflow Module Level 3 , который в настоящее время находится в статусе Working Draft (WD) — рабочий черновик и в настоящее время может полностью не поддерживается в некоторых браузерах.

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

Так же для этих целей можно пойти по пути JavaScript. Clamp.js старая но вполне рабочая библиотека:

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

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

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

Desktop

Mobile / Tablet

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

• CSS Overflow Module Level 3 – Спецификация
• Safari CSS Reference – Документация для неподдерживаемой реализации WebKit
• Line Clampin’ (Truncating Multiple Line Text) – Крис Койер
• Clamp. js – метод JavaScript для кросс-браузерной поддержки
• Pitfalls of Card UIs – Дэйв Руперт об опасностях усечения текста

Перевод статьи: line-clamp

Была ли вам полезна эта статья?

Spread the love

свойство -moz-box-flex | -webkit-box-flex свойство CSS (каскадные таблицы стилей)

Вы находитесь здесь: Справочник > CSS > свойства > расширения браузера > -moz-box-flex

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

Возможные значения:

гибкость (неотрицательное целое число)		Целое число, приоритет гибкости по другим элементам.
унаследовать		Берет значение этого свойства из вычисленного стиля родительского элемента.

По умолчанию: 0 .

Пример кода HTML 1:

Этот пример иллюстрирует использование свойств -moz-box-flex и -webkit-box-flex :

 <голова>
    <стиль>
        .коробка {
            отображение: -moz-inline-box;
            отображение: -webkit-inline-box;
            ширина: 250 пикселей;
            граница: 5 пикселей сплошного красного цвета;
        }
        .flex1 {
            -moz-box-flex: 1;
            -вебкит-бокс-флекс: 1;
            фон: зеленый;
        }
        .flex2 {
            -moz-box-flex: 2;
            -вебкит-бокс-флекс: 2;
            фон: голубой;
        }
        .flex3 {
            -moz-box-flex: 3;
            -вебкит-бокс-флекс: 3;
            фон: оранжевый;
        }
     

<тело>
    <дел>
        
флекс 1
        
флекс 2
        
флекс 3
    
 

Поддерживается тегами:

a, abbr, acronym, address, b, bdo, big, blink, blockQuote, body, caption, center, cite, code, dd, del, dfn, dir, div, dl, dt , em, fieldSet, font, form, h2, h3, h4, h5, H5, H6, hr, html, i, iframe, ins, isIndex, kbd, label, legend, li, marquee, menu, ol, p, pre , s, samp, small, span, strike, strong, sub, sup, table, td, textArea, th, tr, tt, u, ul, var, q, xmp

Связанные страницы:

-moz-box-align
-moz-box-direction
-moz-box-ordinal-group
-moz-box-orient
-moz-box-pack
-moz-box-sizing

Внешние ссылки:

-moz-box-flex (Центр разработчиков Mozilla)
-webkit-box-flex (справочная библиотека Safari)

Пользовательские комментарии

css box-flex — Справочник CodeProject

См. Flexbox для получения дополнительной информации о том, что следует использовать вместо этого свойства.

Пример

HTML

Копировать код

  <голова>
    
    <стиль>
      div.example {
        дисплей: -moz-box;
        дисплей: -webkit-box;
        граница: 1px сплошной черный;
        ширина: 100%;
      }
      div.example > p:nth-child(1) {
        -moz-box-flex: 1; /* Мозилла */
        -вебкит-бокс-флекс: 1; /* Веб-кит */
        граница: 1px сплошной черный;
      }
      div.example > p:nth-child(2) {
        -moz-box-flex: 0; /* Мозилла */
        -вебкит-бокс-флекс: 0; /* Веб-кит */
        граница: 1px сплошной черный;
      }
    
  
  <тело>
    <дел>
      
Я расширюсь, чтобы заполнить дополнительное пространство
      
Я не буду расширяться