Текст с использованием блока VW не работает

Question

Я надеюсь использовать единицы VW для определения размера типографии, но при этом текст огромен и явно больше ширины области просмотра. По сути, я хочу, чтобы мой текст был адаптивным в родительском.container, поэтому текст никогда не обрезается и не переполняется, как это было бы при использовании статической единицы размера, такой как px или em?

HTML

<div class="container">
    <h1>Responsive Typography!</h1>
</div>

CSS

.container {
  width: 100%;
  background: red;
  height: 100%;
}

h1 {
  font-size: 40vw;
}

FIDDLE

Answer 1

Ваша скрипка правильно рендерится.

• font-size Классически, относится к ширине заглавной буквы М. Давайте с этим пока.*
• 1vw составляет 1% от ширины области просмотра.

Таким образом, font-size: 40vw примерно означает "сделать этот текст таким, чтобы ширина заглавной буквы M составляла 40% от ширины области просмотра". Другими словами, каждый отдельный персонаж будет довольно огромным.

Он не будет переходить на новую строку, потому что это все одно слово, а CSS по умолчанию разрывает только слова. (Чтобы разбить символы внутри слова, вы должны использовать word-break: break-all на элементе. Обычно это выглядит ужасно.)

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

1. использовать меньше font-size, до сих пор внутри vw и принять, что текст не всегда будет предсказуемой фиксированной ширины; или же
2. попробуйте что-то вроде FitText для динамического изменения размера шрифта.

Обидно, но нет способа сделать то, что вы хотите, с чистым CSS; как это часто бывает, ваш выбор - пойти на компромисс с целью разработки или использовать некоторые умные JS/ хаки для ее достижения.

---

* Примечание о font-size : то, что я сказал выше, на самом деле не так font-size разработан; это просто оказывается достаточно близко для большинства шрифтов, и это облегчает чтение моего ответа. Реальная ситуация сложнее.

Более точным эмпирическим правилом является высота тела, т. Е. Вертикальное расстояние от вершины восходящего элемента (верхняя часть букв, например, b, d и h) до нижней части спускового устройства (нижняя часть букв, таких как g, j). и р) на одной линии. Тем не менее, даже это очень конечно и часто неправильно; в конечном итоге все сводится к метрике шрифта и будет значительно различаться между шрифтами.