Почему при наполнении текста ломается верстка?

Question

[hweifeifjo]

При проверке на переполненность текста, у меня возникла вот такая проблема:



Как её решить? Пытался ограничить текст с помощью width, ничего не получилось. Или это так и должно быть?

HTML:

<div class="programms__item">
    <div class="img">
        <img src="assets/img/programs1.png" alt="">
    </div>
    <div class="programms__info">
        <div class="wrapper">
            <div class="programs__name">
                <p>Туризм</p>
            </div>
            <div class="programs__link">
                <a href="program.html">Подробнее <img src="assets/img/download-button.svg" alt=""></a>
            </div>
        </div>
    </div>
</div>

CSS:

.programs .container {
  max-width: 1280px;
}
.programs .container .wrapper {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.programs .container .wrapper .programms__item {
  border: 2px solid #ffffff;
  border-radius: 30px;
  margin-bottom: 48px;
}
.programs .container .wrapper .programms__item .img img {
  width: 100%;
  height: auto;
}
.programs .container .wrapper .programms__item .programms__info {
  padding: 14px 21px 19px 26px;
}
.programs .container .wrapper .programms__item .programms__info .wrapper {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.programs .container .wrapper .programms__item .programms__info .wrapper .programs__name p {
  font-size: 30px;
  line-height: 49px;
}
.programs .container .wrapper .programms__item .programms__info .wrapper .programs__link a {
  padding: 4px 6px 3px 23px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: -o-linear-gradient(355.52deg, #b852ff 0.63%, #5578e3 100%);
  background: linear-gradient(94.48deg, #b852ff 0.63%, #5578e3 100%);
  border-radius: 30px;
  font-size: 18px;
  line-height: 28px;
}
.programs .container .wrapper .programms__item .programms__info .wrapper .programs__link a img {
  margin-left: 13px;
}

Comments

[Ankhena]

.programs .container .wrapper .programms__item .programms__info .wrapper .programs__link a img

Это ... любое неприличное слово.
А если вы ещё и БЭМ используете, то совсем ужс.

Вложенность селекторов больше двух-трех это дурной тон и выстрел себе же в ногу.

Пытался ограничить текст с помощью width, ничего не получилось.

В коде этого не видно.

Чтобы обрезать текст, кроме width потребуется ещё overflow и text-overflow.

Сделайте пример в песочнице codepen.io
Желательно уже с нормальными селекторами.
Каринки можно заменить на любые или использовать заглушки.

[hweifeifjo]

Ankhena,Спасибо за ответ и совет, учту при следующей своей разработке)

Answer 1

[Mizutsune]

.programs__name {
   min-width: 0;
}

.programs__name p {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}

Обрезать текст можно с помощью набора свойств: text-overflow, overflow и white-space(хотя возможно оно здесь лишнее). А вот min-width: 0 используется для того чтобы дочерние элементы во flex контейнере, могли сжиматься при уменьшении ширины родительского элемента.

Comments

[hweifeifjo]

Спасибо, сработало. Только я заменил min-width на просто width(фиксированная ширина).