Skip to content
EN

Размеры и переполнение

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

also in web design and web development basics

On this page

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

width, min-width и max-width

СвойствоЧто задаетПример
widthШиринуwidth: 100% – ширина относительно содержащего блока, обычно родителя
min-widthНижнюю границу шириныmin-width: 160px – не уже 160px
max-widthВерхнюю границу шириныmax-width: 480px – не шире 480px

Для карточки, которая помещается и на телефоне, и на большом экране:

styles.css
.card {
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  padding: 16px;
}

Она занимает доступную ширину, но перестает расти на 480px. border-box включает внутренние отступы в заданную ширину. Если задать min-width: 480px, это будет уже минимальная ширина: на узком экране карточка может не поместиться.

Почему width: 100% иногда шире родителя

При content-box сто процентов задают только ширину содержимого. Отступы и рамка прибавляются к ней. Переключите border-box в примере и посмотрите, как меняется край карточки. Затем уменьшите ширину и включите перенос длинного слова:

Название файла:

very_long_filename_without_spaces.png

Пунктир показывает ширину родителя. Рамка карточки: 276px. Длинное имя не имеет обычных мест для переноса.

index.html
<div class="container">  <div class="card">    <p>Название файла:</p>    <span>very_long_filename_without_spaces.png</span>  </div></div>
styles.css
.container {  width: 240px;  outline: 2px dashed #9a3412;}
.card {  width: 100%;  box-sizing: content-box;  padding: 16px;  border: 2px solid #2563eb;  background: #dbeafe;  color: #172554;  overflow-wrap: normal;  overflow: visible;  font-size: 16px;  line-height: 24px;}
.card p {  margin: 0 0 8px;}

Здесь две независимые проблемы. box-sizing определяет расчет коробки. overflow-wrap: anywhere разрешает перенос длинного слова, которое иначе не помещается. Исправление одной проблемы не исправляет вторую.

Что делать с переполнением

overflowРезультат
visibleНачальное значение: содержимое может быть видно за границей
hiddenЛишняя часть обрезается, обычной полосы прокрутки нет
autoПри необходимости появляется прокрутка

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

Высота и изображение

height задает высоту. min-height и max-height ограничивают ее снизу и сверху. Для текста часто достаточно автоматической высоты: коробка растет вместе с содержимым. Жесткая высота может обрезать текст при переносах или увеличении шрифта.

Чтобы изображение помещалось в родителя и сохраняло пропорции:

styles.css
img {
  max-width: 100%;
  height: auto;
}

Так ширина изображения ограничивается шириной родителя, а height: auto сохраняет пропорции. В отличие от width: 100%, это правило не требует занять всю строку. Для фотографии внутри коробки с заранее заданными шириной и высотой подойдет object-fit: cover: пропорции сохранятся, но часть картинки обрежется. contain покажет картинку целиком, оставив свободное место.

Подробнее: размеры элементов на MDN, overflow и overflow-wrap.