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

32

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

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

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

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

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

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

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

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

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

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

Text to truncate here.
Other stuff.

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

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

Text to truncate here.

Other stuff.

/* Тепер текст є заголовком,
Щоб все працювало, текст потрібно обрізати */
.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 (всупереч специфікації).

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

Не працює: Текст в дочірньому елементі обгорнутий в тег

Працює: Текст обгорнутий в

, але flex-елемента задано властивість min-width