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

Question

[CAMOBAP4UK]

https://codepen.io/camobap6/pen/vYLjYxv
Почему текст выходит из рамки? По идее, он должен быть в красной рамке и в случае, если он выходит за пределы то появляться многоточие, а сам текст скрываться.

Answer 1

[Eduard07]

margin: 0; добавь у тегу

Comments

[CAMOBAP4UK]

Невнимательность 80лвл. Спасибо

Answer 2

[Дуболом Одноклеточный]

убери у .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% не надо

Comments

[WapSter]

в случаее если он выходит за пределы , то появляться многоточие а сам текст скрываться

[Дуболом Одноклеточный]

WapSter, Спасибо за то что напомнил, а то я очень плохо читаю вопросы

[WapSter]

Дуболом Одноклеточный, эти свойства делают именно то, что хочет автор. Ну ты видимо такой хороший знаток зачем я тебе это говорю

[WapSter]

Дуболом Одноклеточный,

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

что за бред) text-overflow: ellipsis; там кстати указан. Автор просто не обнулил марджины

[Дуболом Одноклеточный]

WapSter, АААА, текст должен в красном поле быть...
Я сегодня рассеянный

[WapSter]

Дуболом Одноклеточный,

Спасибо за то что напомнил, а то я очень плохо читаю вопросы

видимо все же плохо читаешь, тебе бы в школу

[Дуболом Одноклеточный]

WapSter,
)))))

[Дуболом Одноклеточный]

WapSter, В душе мне 10 )))