Как выровнять текст?

Question

[Фёдор]

Приветствую! Делаю адаптив для своего сайта. В брэйкпоинте:

@media screen and (min-width: 992px) and (max-width: 1199px)

Не выравнивается текст в две строки. Должно выглядеть так:


По факту так:

Исходный код:

.test {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    width: calc(100% / 3 - 30px);
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
    padding: 0 5px;
}

.test:nth-child(odd) img{
    width: 100%;
    height: auto;
}

.test:nth-child(2) img {
    width: 85%;
    height: auto;
}

.test h3 {
    font: bold 1.5em 'Gelion', sans-serif;
    padding: 25px 0;
}

.test p {
    font: 400 1.015em 'Gelion', sans-serif;
    text-transform: capitalize;
    text-align: center;
    padding-bottom: 30px;
}

Когда растягиваю до 1100px строки становятся как надо, ниже нет. Подскажите, как выравнять его?

Comments

[Ankhena]

В смысле, вы не понимаете, почему, когда карточка шире, текст помещается в 2 строки, причем занимает их практически полностью, а когда она становится уже, то тот же текст не помещается?

[Фёдор]

Ankhena, понимаю. Я в основном пробовал через разные варианты ширины.

[Ankhena]

Фёдор, в данном случае не понятно, чего ради обрезать текст и почему бы ему не быть в 3 или 4 строки.
Вот отступы у карточки куда-то уехали, слишком маленькие.

[Фёдор]

Ankhena, Так как в макете представлена только десктопная версия, то приходится на своё усмотрение делать адаптив и в данном случае, режет глаз. Хочется, чтобы бы было в две строки.

[Ankhena]

Фёдор, тогда обрезайте и делайте, чтобы при наведении показывался весь текст.

Лично я бы на месте посетителя сайта удивилась бы.

Возможно, лучше изменить текст.

Answer 1

[r_g_b_a]

Не выравнивается текст в две строки. Должно выглядеть так:

Если у вас железное условие, что должно быть максимум две строки для заголовка, то нужно в css ограничить высоту блока, а все лишнее обрезать.

.demo {
  font-size: 14px;
  line-height: 1.5;
  height: calc(14px * 1.5 * 2);
  overflow: hidden;
}

Просто подбор ширины карточки ничего не даст. У пользователя банально не загрузится подключенный шрифт и результат будет не предсказуем.

Если же задача стоит просто в данном примере поместить текст в две строки - поиграйтесь с letter-spacing

Answer 2

[NeKt0]

Если нужно, чтобы только 2 строки текста было, к примеру, то можно сделать так:

/* если указано количество строк и длинный текст надо сокращать */

.some-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; 
}

Тогда весь лишний текст будет обрезаться и вместо него будет троеточие.

Что касается картинок, то можно было сделать так:

/* Картинка масштабируется по отношению к родительскому элементу */

img {
  object-fit: cover;
  width: 100%;
  height: 100% // или нужная высота
}

Как-то так.