Flexbox і обрізання тексту

Від автора: уявімо: у нас є рядок тексту всередині дочірнього елемента flex-контейнера. Ви хочете зробити так, щоб текст обрізався з додаванням крапки, а не вів себе, як блоковий елемент (або на крайній випадок можна ховати виступаючий текст). І раптом все йде не за планом! Макет не працює, а батьківський блок не стискається. А адже Flexbox повинен був зробити роботу з макетом простіше!

На щастя, є рішення (причому стандартизоване). Для цього доведеться скористатися властивостями, що не належать до flexbox.

Що ми хочемо зробити

GIF зображення показує, як текст обрізається при зменшенні дочірнього елемента.

Можлива проблема

GIF зображення показує, як текст перешкоджає стисненню батьківського блоку. Контейнер не просто може не стискатися, він може стати занадто широким.

Проблема у дочірніх елементах (flex-елементах)

Дивно… коли текст лежить безпосередньо всередині дочірнього елемента, все працює нормально:

/* Текст безпосередньо лежить всередині flex-елемента,
Який є його обгорткою */
.flex-child
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Проблема виникає, коли додаються елементи типу:

/* Тепер текст є заголовком,
Щоб все працювало, текст потрібно обрізати */
.flex-child > h2 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Рішення – необхідно додати властивість min-width: 0; до flex-елементу

Або якесь інше значення min-width. Без цього flex-елемент, що містить інші текстові елементи всередині себе, не буде стискатися.

Коли я вперше зіткнувся з цією проблемою, я знайшов спосіб Pen by AJ Foster. Автор пише: «По специфікації текст вище не повинен стиснутися до нуля, якщо занадто сильно стиснути батьківський блок. Так як у класі .subtitle ширина задана на 100%, а min-width: auto, то flexbox робить контейнер більше, ніж нам потрібно.»

Спосіб працює в Chrome, Opera і Firefox. В Safari текст обрізався навіть без властивості min-width (всупереч специфікації).