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

Question

[Denys03]

У меня есть блоки товара, в них если написать название телефона достаточно длинное, то один блок становится больше другого, на втором ряду вообще пропадает два первых товара, они переносятся на 3 ряд, а во втором только 3 товар есть :D

Comments

[LJ322]

Есть ссылка на пример?

[Вадим]

Включить перенос текста.
https://developer.mozilla.org/en-US/docs/Web/CSS/C...
https://developer.mozilla.org/en-US/docs/Web/CSS/t...
https://developer.mozilla.org/en-US/docs/Web/CSS/-...

[Denys03]

LJ322, Держите ссылку, тут чуток кривовато, но для примера сойдёт. Посмотрите например что происходит после 3 блока. Я туда специально текста закинул.

Пример:
https://codepen.io/Denysko19/pen/mdKqQzr

Answer 1

[Stanislav]

Все просто)

.box {
    inline-size: 150px;
    overflow-wrap: break-word;
}

<div class="box">
    Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
</div>

Comments

[Denys03]

Спасибо, попробую, видимо мне не хватает работы с текстом :D

Вот если что пример, чтобы понимали как это выглядит:
https://codepen.io/Denysko19/pen/mdKqQzr

Answer 2

[Андрей Мартынкевич]

Ещё можно обрезать текст и добавить многоточие.
Пример:

.example{
    width: 150px; /* Текст длиннее данной ширины будет обрезан */
    white-space: nowrap; /* Текст не переносится */
    overflow: hidden; /* Обрезаем всё за пределами блока */
    text-overflow: ellipsis;
}

Comments

[Denys03]

Спасибо, позже гляну, всё таки нужно будет немного посмотреть работу с текстом, а то вообще не дело)

Вот если что пример, чтобы понимали как это выглядит:
https://codepen.io/Denysko19/pen/mdKqQzr