@CAMOBAP4UK

Почему текст вылазит из блока?

https://codepen.io/camobap6/pen/vYLjYxv
Почему текст выходит из рамки? По идее, он должен быть в красной рамке и в случае, если он выходит за пределы то появляться многоточие, а сам текст скрываться.
  • Вопрос задан
  • 106 просмотров
Решения вопроса 1
@Eduard07
margin: 0; добавь у тегу
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
duboloms
@duboloms
Люблю есть дубы с кетчупом. Веб-разработчик.
убери у .element-grid__text white-space: nowrap;
.element-grid__text {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 900;
    font-size: 24px;
    line-height: 29px;
    color: black;
    padding: 0;
    text-overflow: ellipsis;
    /* убери white-space: nowrap */
/*     white-space: nowrap; */
    /*overflow: hidden;*/
    max-width: 88%;
}


white-space определяет перенос текста, если текст жмет какой-то блок

Изменено: чтобы в конце многоточие было нужно задать text-overflow: ellipsis; а также height: 100%; тексту, чтобы overflow: hidden; его не скрывал полностью:
.element-grid__text {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 900;
    font-size: 24px;
    line-height: 29px;
    color: black;
    padding: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    height: 100%;
    max-width: 88%;
}

если не задать высоту тексту, то css будет считать, что у текста вообще нет высоты, соответственно overflow: hidden; будет "обрезать" его

Изменено 2 (важно):
Оказывается текст должен быть в красной рамке, для этого нужно обнулить margin:
.element-grid__text {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 900;
    font-size: 24px;
    line-height: 29px;
    color: black;
    padding: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 0;
    max-width: 88%;
}

margin выталкивает текст из блока и overflow: hidden скрывает его, а height: 100% не надо
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы