Mecitan
@Mecitan
Уверенный пользователь клавиатуры

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

Приветствую! Делаю адаптив для своего сайта. В брэйкпоинте:
@media screen and (min-width: 992px) and (max-width: 1199px)

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

По факту так:
601179d8254d1444558762.png
Исходный код:
.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 строки становятся как надо, ниже нет. Подскажите, как выравнять его?
  • Вопрос задан
  • 79 просмотров
Решения вопроса 1
@r_g_b_a
Не выравнивается текст в две строки. Должно выглядеть так:

Если у вас железное условие, что должно быть максимум две строки для заголовка, то нужно в css ограничить высоту блока, а все лишнее обрезать.
.demo {
  font-size: 14px;
  line-height: 1.5;
  height: calc(14px * 1.5 * 2);
  overflow: hidden;
}

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

Если же задача стоит просто в данном примере поместить текст в две строки - поиграйтесь с letter-spacing
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@bubn0ff
it-шник
Если нужно, чтобы только 2 строки текста было, к примеру, то можно сделать так:

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

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


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

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

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


Как-то так.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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