Задать вопрос
@seregindev

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

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

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

Не могу понять в чём причина
41b15b789c814cfebf856d7a970f33c0.png
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;
}
  • Вопрос задан
  • 5700 просмотров
Подписаться 2 Средний 6 комментариев
Ответ пользователя kulaeff К ответам на вопрос (4)
@kulaeff
Front-end developer
А зачем вам в данном случае использовать flex? К тому же, чтобы обрезать контент, выходящий за пределы элемента, нужно использовать overflow: hidden.
Ответ написан