Как заставить текст не вылазить за переделы flex-контейнера?

Question

[seregindev]

Доброго времени, столкнулся с проблемой: текст выходит за пределы flex-контейнера(h3).
Свойства: word-wrap, word-break, не помогают...

Перепробоавал всё что знал, так и не получилось

Не могу понять в чём причина

h3 {
font-size: 25px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 20px;
    word-break: initial;
}
h3::before {
    display: inline-table;
    text-align: center;
    padding-top: 19px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #e8e8e8;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    color: #fff;
    font-size: 85px;
    font-weight: 200;
    width: 153px;
    height: 153px;
    margin-right: 13px;
}

Comments

[Ярослав Иванов]

Не использовать флекс.

[cssfish]

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

[seregindev]

cssfish, Ярослав Иванов : посовейтуте, что лучше тогда использовать, padding'и ?

[Ankhena]

seregindev: выложите нужный код на jsfiddle

[cssfish]

ну как вариант - сделайте через table-cell обе части и будет вам верт. выравнивание заодно

upd: а, это заголовок... ну тут тупо абсолютом вынесите круг влево, центрируем обычным top: 50%+ отрицательный верхний маржин = height/2 , он же у вас фикс. размера. а заголовку отступ слева чтоб не наезжал.

upd2
ниже фидл кинул в ответы

[seregindev]

cssfish: Спасибо большое!

Answer 1

[cssfish]

в общем вот вам пример того что выше в комментах описал (простой абс элемент)
https://jsfiddle.net/1e43aorq/

Answer 2

[kulaeff]

А зачем вам в данном случае использовать flex? К тому же, чтобы обрезать контент, выходящий за пределы элемента, нужно использовать overflow: hidden.

Comments

[seregindev]

overflow обрежет, нужно чтобы переносилось на след строку. По поводу Flex'ов, использую для выравнивания содержимого блока h3 и его содрежимого в псевдоэлемента в виде цифры "4"

[kulaeff]

Выравнивать можно и без flex. Вы бы сделали рабочий пример, например, на jsfiddle.net.

Answer 3

[Денис Щетинин]

Ширину попробуйте для родительского блока задать, и padding-right можно если хотите отступ

Answer 4

[MaksimUl]

-webkit-box-flex:
-webkit-flex:

Задает возможность бокса растягиваться на пустое пространство родительского. Значение по умолчанию - 0. Это значит, что блок не растягивается, его ширина (высота, зависит от ориентации родительского) равна ширине (высоте), указанной в стилях.
Если у свойства -webkit-box-flex указано значение, отличное от 0, то бокс растягивается в родительском пропорционально с соседними дочерними элементами.

Если, например, у всех дочерних боксов -webkit-box-flex:1, то они равномерно заполняют все пространство родительского, имея равные размеры.

Если же у одного стоит значение 1, а у соседнего - 2, то первый займет треть родительского, а второй - две трети.