Основы css

Но что, если контейнер не является окном просмотра (телом)?

Этот вопрос задан Алексом в комментарии к принятому ответу.

Этот факт не означает не может использоваться до некоторой степени для определения размера этого контейнера. Теперь, чтобы увидеть какие-либо вариации, нужно предположить, что контейнер в некотором роде гибкий по размеру. Будь то прямой процент или 100% минус маржа. Вопрос становится «спорным», если контейнер всегда установлен, скажем, широкий — тогда просто установите это работает для этой ширины.

Пример 1

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

Предполагая здесь дитя , это того, что width, которая в данном случае является размером области просмотра. По сути, вы хотите установить это будет вам хорошо смотреться. Как вы можете видеть в моем комментарии к приведенному выше содержимому CSS, вы можете «продумать» это математически относительно полного размера области просмотра, но вы не нужно сделать это. Текст будет «изгибаться» вместе с контейнером, потому что контейнер изгибается при изменении размера области просмотра. ОБНОВЛЕНИЕ: вот пример двух контейнеров разного размера.

Пример 2

Вы можете помочь обеспечить размер области просмотра, заставив вычисление основываться на этом. Рассмотрим этот пример:

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

Перекрёстная ось

Свойства  и управляют выравниванием flex элементов по перекрёстной оси: вертикальной для  установленным в  и горизонтальной для  установленным в .

Рассмотрим выравнивание по перекрёстной оси на простейшем примере. Если установить  у контейнера, все дочерние элементы становятся flex элементами, выстроенными в ряд. Все они по вертикали примут размер самого высокого элемента, который станет определяющим вертикального размера. Если у flex контейнера задана высота, то все элементы растянутся до высоты контейнера, независимо от размера содержимого.

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

Другие возможные значения свойства:

В примере ниже значение свойств  установлено в . Попробуйте другие значения для понимания их действия.

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

В следующем примере, у flex контейнера установлено , означающее, что все элементы будут выравнены по началу перекрёстной оси. У первого элемента с помощью  селектора установлено ; у следующего элемента с классом  установлено . Можно изменять значение  на контейнере или  на элементе для изучения их работы.8н

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

Если изменить  на column, и будут сдвигать элементы влево или вправо.

Можно попробовать пример ниже, где установлено .

Значения

static

Алгоритм CSS позиционирования по умолчанию. Блок располагается в соответствии с нормальным потоком. Свойства top, right, bottom и left не применяются.

relative

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

Эффект применения свойства position: relative к табличным элементам:

• table-row-group, table-header-group, table-footer-group и table-row смещаются относительно своей нормальной позиции в пределах таблицы. Если ячейки таблицы объединяют несколько строк, то смещаются только ячейки относительно позиционированной строки;
• table-column-group, table-column не смещают соответствующий столбец, когда применено свойство position: relative;
• table-caption и table-cell смещаются относительно нормальной позиции внутри таблицы. Если ячейка таблицы занимает несколько столбцов или строк, то смещается вся составная ячейка.

absolute

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

sticky

Позиция блока рассчитывается согласно нормальному потоку (как position: relative). Блок смещается и фиксируется относительно области просмотра и внешнего блока, и во всех случаях, включая табличные элементы, он не влияет на положение последующих элементов. Когда элемент позиционирован «прилипанием», положение следующего элемента задается без учета смещения. Эффект от применения position: sticky к табличным элементам такой же, как и от position: relative.

center

CSS позиционирование блоков определяется свойствами top, right, bottom и left. Блок центрируется вертикально и горизонтально внутри контейнера относительно центрального положения блока в содержащем его контейнере. Центрально позиционированные блоки изымаются из нормального потока. Это означает, что они не влияют на разметку последующих элементов (как и absolute). Центрально позиционированные элементы могут иметь отступы, если они не пересекаются с другими.

page

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

Иначе содержащий блок определяется согласно абсолютной модели.

Как и в абсолютной модели, отступы блока не перекликаются с какими-либо другими отступами.

Свойства управления выравниванием

В этом руководстве рассматриваются следующие свойства:

• — управляет выравниванием элементов по главной оси.
• — управляет выравниванием элементов по перекрёстной оси.
• — управляет выравниванием конкретного flex элемента по перекрёстной оси.
• — описывается в спецификации как “упаковка flex строк”; управляет промежутками между flex строками по перекрёстной оси.

Также будет рассмотрены авто-отступы для выравнивания элементов во flexbox.

Замечание: Свойства выравнивания во Flexbox помещены в отдельную спецификацию — CSS Box Alignment Level 3. Ожидается, что данная спецификация в конце концов заменит свойства, определённые во Flexbox Level One.

Позиционирование элементов с типом absolute

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

В приведенной ниже демо-версии проиллюстрировано данное поведение:

В примере мы задаем зеленому полю тип позиционирования absolute со значением смещения bottom:0 и left:0. Кроме этого мы не указываем тип позиционирования для его прямого родителя (красное поле).

В то же время мы позиционируем относительно элемент с классом jumbotron

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

Обрезка до нужного числа строк (с многоточием)

К сожалению, чтобы провернуть нечто подобное с несколькими строками, придётся прибегнуть к ненадёжному методу. Ненадёжный он потому, что используемые в нём свойства не являются частью стандарта, могут поддерживаться не всеми браузерами и их поддержка может быть прекращена в любой момент. Поэтому они не рекомендованы для использования в продакшене. На данный момент приведённое решение будет работать во всех браузерах на основе Webkit (Chrome, Opera), Firefox и Edge.

Сначала рассмотрим, это работает.

.truncate-text {
  width: 200px;
  height: 80px;
  background: #c8ad90;
  padding: 1rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

Сочетание трёх последних строк даёт нам добавление многоточия в конце 3-й строки (при этом строки ниже не скрываются, это надо сделать вручную). Также мы снова имеем проблему текста поверх нижнего внутреннего отступа, которую на этот раз мы решим за счёт изменения разметки.

<div class="container">
  <div class="truncate-text">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
  </div>
</div>

.container {
  width: 200px;
  background: #c8ad90;
  padding: 1rem;
}
.truncate-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 1.3em;
  height: 3.9em;
}

Рассмотрим эти свойства подробнее.

Вообще display: box это старый синтаксис , который используется, например, для поддержки flexbox в старых Safari. При этом обязательно использовать префикс -webkit. В документации Firefox можно найти упоминание значения display: -moz-box, но в поздних версиях оно было заменено на -webkit-box, также Firefox поддерживает значение без префикса (box). Как говорилось выше, это аналог display: flex, и соответственно влияет на расположение дочерних элементов и распределение свободного пространства.

Аналог свойства flex-direction: column. Также является частью flexbox.

Первоначально реализованное в Webkit и в Firefox и Edge свойство, ограничивающее количество строк контента в блоке. Спецификация определяет свойство line-clamp, призванное прийти на замену варианту с префиксом, но для обратной совместимости требуется, чтобы -webkit-line-clamp также поддерживалось. В IE, естественно, это не сработает даже с префиксом.

Живой пример можно найти тут.

Если размер контейнера динамически изменяется …

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

Возьмем пример №1 выше. Если был переключен на ширина либо или JavaScript, то в то же время потребуется настроить либо в медиа-запросе, либо с помощью JavaScript для нового расчета . Это приведет к тому, что размер текста будет таким же, как если бы «ширина» оригинала Контейнер был уменьшен вдвое по сравнению с размером области просмотра, но теперь он был уменьшен из-за изменения его собственного процентного расчета.

Вызов

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

• (Есть ошибка Chrome с длиной окна просмотра в процентах и ​​изменением размера окна: code.google.com/p/chromium/issues/detail?id=124331)
• @thirtydot: Это прискорбно (но хорошо, что нужно знать, спасибо). Надеюсь, что ошибка будет исправлена ​​в ближайшее время, но похоже, что она сохраняется уже некоторое время.
• 24 Отличный ответ, однако он не сработает, если содержащий элемент имеет максимальную ширину.
• 4 @KristofferNolgren: Это относится к двум пунктам, сделанным в моем ответе: (1) «если предположить, что контейнер каким-то образом является гибким по размеру» (после достижения ‘max-width’ он больше не прогибается, поэтому возникает выпуск). (2) Если можно определить, в какой точке будет достигнута максимальная ширина, то, как я уже отмечал, можно установить точка останова, чтобы изменить размер шрифта в этой точке (по сути, давая ему фиксированный размер при достижении ). Просто мысль поработать с ситуация.
• Как вы думаете, сможете ли вы вспомнить, когда элемент контейнера динамически изменяется с помощью медиа-запросов? Я не уверен, что понимаю.

Адаптивный фон, фиксированный контент

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

HTML

<section>
  <div class="wrapper"></div>
</section>

CSS

section {
  background-color: #ccc;
}

.wrapper {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

Принцип работы margin-left: auto и margin-right: auto заключается в вычислении половины ширины окна просмотра и вычитании из неё ширины контента. То же самое можно сделать, используя padding.

CSS

section {
  padding: 1rem calc(50% - 585px);
}

Мы ещё не закончили. На мобильных устройствах контент будет соприкасаться с границами экрана. Решить это можно следующим способом:

CSS

section {
  padding: 1rem;
}

@media (min-width: 1170px) {
  section {
    padding: 1rem calc(50% - 585px);
  }
}

В качестве альтернативного решения можно использовать новую функцию CSS max(). Мы просто устанавливаем минимальный padding размером в 1rem, а вычисление 50% — 585px будет использовано в качестве другого значения.

CSS

section {
  padding: 1rem max(1rem, (50% - 585px));
}

CSS text-orientation: параметры и особенности

Во многом это аналогично тому, как text-comb-upright разворачивает группы символов в строке в вертикальном направлении. Но он применяется для текстовых строк целиком.

Для создания двунаправленного текста, например, блока, который содержит текст, написанный слева направо и справа налево, потребуется свойство unicode-bidi. Оно сочетается со свойством direction и позволяет переопределить способ отображения текста браузером.

• Значение по дефолту: mixed | upright;
• Применимо к: всем элементам, кроме строк и колонок таблицы;
• Наследуемость: да;
• Возможность анимации: нет.

mixed значение по умолчанию; горизонтально расположенные символы поворачиваются на 90° по часовой стрелке, а вертикально — отображаются в их естественной первоначальной ориентации.

upright горизонтальные символы сохраняют свое дефолтное расположение; если в этом режиме повернуть строку текста так, чтобы символы располагались боком, то это значение повернет их на 90 ° в их естественное положение (это значение заставляет свойство direction принимать значение ltr; в результате все символы обрабатываются так, как если бы они располагались в режиме письма слева направо);

sideways весь текст в режиме вертикального письма отображается боком, как если бы он был в горизонтальном расположении; вся строка поворачивается на 90° по часовой стрелке;

sideways-right: некоторые браузеры воспринимают это значение как синоним sideways, используемый для обратной совместимости.

<div class="text">Текст</div>

.text { 
     writing-mode: vertical-lr; 
     text-orientation: upright; 
}

Решение с SVG и переносом текста с использованием foreignObject:

• 1 Поначалу идея выглядит неплохо. Тогда вы понимаете, что не можете легко управлять шрифтом в SVG внутри <html>. Шрифт на мобильном устройстве и на компьютере отличается, что влияет на окончательную ширину. </html>
• 12 Вы можете полностью стилизовать SVG из HTML / CSS
• 2 SVG можно стилизовать с помощью css, если svg является встроенным (не используйте тег img).
• 10 Это лучшее, наиболее предсказуемое решение, масштабируемое на основе динамического контейнера.
• 1 Использовал это для значков, которые я хотел масштабировать. Это потрясающе!

В одном из своих проектов я использую «смесь» между vw и vh, чтобы настроить размер шрифта под свои нужды, например:

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

• 4 Возможно, вам лучше использовать и / или вместо.
• 5 инструментов Chrome Dev называют это недопустимым значением свойства

Решение на чистом CSS с , Единицы CSS и математика

Это как раз не то, о чем просит OP, но может улучшить чей-то день. Этот ответ не так уж прост и требует некоторого исследования со стороны разработчика.

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

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

HTML

Код JavaScript для увеличения размера шрифта:

Я не вижу ответа относительно свойства CSS flex, но оно тоже может быть очень полезным.

2 Можете уточнить?

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

Ванильный JavaScript: изменение размера шрифта под размер контейнера

JavaScript:

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

Применить класс для всех элементов, содержащих текст, который вы хотите масштабировать.

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

ПРИМЕЧАНИЕ. По умолчанию должен быть установлен на , или же для достижения должных результатов.

Firefox поддерживает использование overflow для тегов TBODY

Одна действительно приятная особенность браузера Firefox заключается в том, что вы можете использовать свойство overflow во внутренних тегах таблиц, таких как tbody и thead или tfoot. Это означает, что вы можете установить полосы прокрутки для содержимого таблицы, а ячейки заголовков останутся привязанными к ним.

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

<table style="width:300px;">
  <thead>
    <tr>
      <th>Name</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody style="overflow:auto; overflow-x:hidden; height: 100px;">
    <tr>
      <td>Jennifer</td>
      <td>502-5366</td>
    </tr>
    ... 

Вадим Дворниковавтор-переводчик статьи «HTML Scroll Box»

visible

overflow: visible — содержимое может выходить за границы элемента, если его размеры превышают размеры контейнера. Выходящее за пределы элемента содержимое не влияет на стандартный макет.

HTML

<div id="box">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget condimentum sapien. Nam in ligula molestie, laoreet neque cursus, dapibus felis. Donec ut malesuada ipsum, id euismod lacus. Quisque et mauris faucibus, sodales ligula id, volutpat dolor. Aenean id tortor lectus.
</div>

CSS

#box {
	width: 200px;
	height: 100px;
	background-color: #FD2D0F;
	overflow: visible;
}

Ширина и высота элемента div установлена на 200px и 100px. Если размеры содержимого больше размеров блока, то оно выходит за его пределы.

Слишком длинная строка на больших экранах

Будет очень сложно читать текст абзаца на больших экранах, так как строка слишком длинная. Сайт «Элементы типографического стиля, используемые в сети» рекомендует, чтобы в строке было 45-75 символов. Чем дальше от этого диапазона, тем сложнее будет читать текст, представленный на веб-странице.

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

HTML

<section class="hero">
  <div class="hero__wrapper">
    <h2>How to make bread at home</h2>
    <p>...</p>
    <p><a href="/sign-up">Sign up</a></p>
  </div>
</section>

Я использовал класс hero__wrapper, так как этот контейнер может принадлежать только первой секции (Hero Section), поэтому его ширина может быть меньше ширины других контейнеров.

CSS

.hero__wrapper {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

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

Пробелы между boxes

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

Свойство является сокращением для и , что позволяет сразу установить эти свойства:

• (en-US)
• (en-US)

В приведённом ниже примере макет сетки использует сокращённую , чтобы установить разрыв между дорожками строк и разрыв между дорожками столбцов.

В этом примере я использую свойство (en-US) в дополнение к . Первоначальные свойства зазора были предварительно префиксными  в спецификации Grid Layout, а некоторые браузеры поддерживают только эти префиксные версии.

• (en-US)
• (en-US)
• (en-US)

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

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

Обрезка до нужного числа строк (без многоточия)

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

<div class="truncate-text">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
</div>

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

.truncate-text {
  background: #c8ad90;
  padding: 1rem;
  width: 200px;
  height: 80px;
  overflow: hidden;
}

Задаем ограничение по высоте () и свойство overflow, отвечающее за отображение содержимого за границами родительского контейнера (). Для наглядности контейнеру задан фон. Ниже можно видеть, как работает свойство : пример слева без этого свойства (значение по умолчанию visible), справа — с ним (значение hidden).

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

.truncate-text {
  background: #c8ad90;
  padding: 1rem;
  width: 200px;
  height: 80px;
  overflow: hidden;
  position: relative;
}

.truncate-text:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(180deg, transparent, #c8ad90 50%);
}

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

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

Итак, способ второй — используем колонки.

.truncate-text {
  background: #c8ad90;
  padding: 1rem;
  width: 200px;
  height: 80px;
  overflow: hidden;
  column-width: 200px;
}

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

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

.truncate-text {
  background: #c8ad90;
  padding: 1rem;
  width: 200px;
  overflow: hidden;
  column-width: 200px;
  line-height: 1.3em;
  height: 3.9em;
}

Далее можно добавить градиент, как это делалось выше, откорректировав его высоту.

Как отображать кнопку динамически?

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

.read-more { display: none; }
p:truncated + .read-more { display: block; }

Поэтому реализовать это можно только с помощью JavaScript. Например:

const ps = document.querySelectorAll('p');
const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    entry.target.classList('truncated');
  }
});

ps.forEach(p => {
  observer.observe(p);
});

А вот расширенная демо-версия:

Пожалуйста, оставляйте свои отзывы по текущей теме материала. За комментарии, подписки, дизлайки, отклики, лайки огромное вам спасибо!

Пожалуйста, опубликуйте свои мнения по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, отклики, лайки, подписки, дизлайки!

Ангелина Писанюкавтор-переводчик статьи «Multiline truncated text with “show more” button (with just CSS)»

Межстрочный интервал

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

Стандартное значение межстрочного интервала — normal. Это значит, что браузер спросит у шрифта, какое межстрочное расстояние тот предпочитает. Вам ни о чём думать не нужно:

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

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

Используем свойство Display: Contents

Для начала я вас познакомлю с этим значением. Каждый элемент в CSS является блочным; и этот блок содержит контент, границы, внутренние и внешние отступы. Если вы примените display: contents, этот блок будет исключен из потока. Я могу представить это как удаление открывающего и закрывающего тэгов вокруг него.

CSS

<header class="site-header">
    <div class="wrapper site-header__wrapper">
            <!-- Header content -->
    </div>
</header>

CSS

.site-header__wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

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

CSS

.site-header__wrapper {
  display: contents;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

Таким способом элемент wrapper будет скрыт (в каком-то смысле). Теперь, когда мы применили display: flex к элементу site-header, объекты, принадлежавшие контейнеру, станут дочерними для элемента site-header.

Заключение

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

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

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

• 16 Это решение работает только ЕСЛИ (1) вы знаете шрифт, (2) шрифт доступен на устройстве пользователя и (3) текст всегда один и тот же. Это делает его очень ограниченным вариантом использования.
• Я не понимаю, что, если мой контейнер исправлен, например: 640 пикселей и соотношение 16: 9. какие расчеты я должен написать?
• 1 Ширина вашего контейнера составляет 640 пикселей и соотношение 16: 9, поэтому:
• Примечание: это работает, только если у вас действительно размер текста 16: 9, что является странной ситуацией. Возможно, второе чтение ответа может помочь. Кроме того, это работает только для однострочных.
• Если честно, ты не объясняешь «Хорошо отрегулированное соотношение в некотором окне просмотра. Я использовал 320 пикселей, поэтому я получил 24 пикселя в высоту и 224 пикселя в ширину, так что соотношение составляет 9,333 … или 28/3» Предлагаю еще немного пояснить соотношение. Что представляет собой соотношение?

В этом вопросе есть большая философия.

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

всегда относительно тела:

А затем вы можете создать скрипт, который будет изменять размер шрифта относительно ширины вашего контейнера. Но я бы не рекомендовал это. Потому что, например, в контейнере шириной 900 пикселей у вас будет скажем, с размером шрифта 12 пикселей. И по вашей идее, это станет контейнером шириной 300 пикселей и размером шрифта 4 пикселя. Должен быть нижний предел.

Другие решения могут быть связаны с медиа-запросами, чтобы вы могли установить шрифт для разной ширины.

Но решения, которые я бы порекомендовал, — это использовать библиотеку JavaScript, которая поможет вам в этом. И fittext.js, который я нашел до сих пор.

• 6 единица измерения относительно корневого элемента, то есть элемент, а не элемент. Корневой элемент в DOM — это тег. developer.mozilla.org/en-US/docs/Web/CSS/length .. всегда относительно тег, который является корневым элементом, а не тегом тела .. но хороший ответ
• fittext.js делает работу, я рекомендую это решение!
• FitText стал для меня победителем. Пробовал несколько альтернатив, но это показалось самым простым и также хорошо интегрировалось с Drupal / Backdrop CMS.github.com/davatron5000/FitText.js

Вот функция:

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

Затем добавьте что-то подобное в свой код, чтобы установить базовый размер шрифта.

http://jsfiddle.net/0tpvccjt/

• 1 Пока это лучшее решение. Короткое и легкое
• Плохая практика и крайне неэффективная
• @tntrox Каким бы неэффективным он ни был сегодня, он был намного более неэффективным 4 года назад. Я отвергаю этот ответ вместо гораздо лучших альтернатив. Да, для поддержки IE нужен Javascript. Но такой ужасный Javascript не нужен.
• 3 Думаю, здесь проявляется мое невежество. Но ПОЧЕМУ это ужасно?
• Не думаю, что это ужасно. Я бы порекомендовал несколько незначительных изменений форматирования, чтобы сделать его более читабельным. Я бы поместил каждую переменную как минимум в отдельную строку. Возможно, нет необходимости в конце функции. Для повышения производительности вы также можете отменить изменение размера, чтобы оно не перерисовывалось при перетаскивании. Это довольно простой код, поэтому кто-то может создать на нем свое улучшенное решение без особых усилий.

Есть способ сделать это без JavaScript!

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

Попробуйте использовать следующее решение …