Обрезается текст, css. Решение без js

Question

Картинка https://ibb.co/pRkCsPw В макете там обрезается текст до 3 трех строк, я сделал и вроде как получилось, но когда я прописал шаблон грида то текст первых двух картинок обрезается полностью, хотелось бы чтобы не обрезалось. Смысл вопроса: как сделать так, чтобы обрезанный текст не обрезался, после переноса в одну строку? Я знаю, что есть такие вопросы, но не знаю как правильно сформулировать запрос в гугле, ибо находит не то что я ищу.

.main__item {
  width: 420px;
  height: 490px;
  overflow: hidden;
  margin-right: 60px;
}

.main__item {
  width: 420px;
  height: 490px;
  overflow: hidden;
  margin-right: 60px;
}

.item__subtitle {
  color: #626262;
  font-family: "Playfair Display";
  font-size: 30px;
  font-weight: 400;
  margin-bottom: 34px;
}

.item__suptitle {
  color: #b4ad9e;
  font-family: Ubuntu;
  font-size: 14px;
  font-weight: 300;
  text-transform: uppercase;
  margin-top: 32px;
  margin-bottom: 28px;
}

.item__image {
  width: 420px;
}

.main__inner {
  margin-top: 99px;
  padding-left: 79px;
  padding-right: 89px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 420px 420px;
}

<section class="main">
  <div class="container">
    <div class="main__inner">
      <div class="main__item">
        <div class="item__image">
          <img src="item.png" alt="Картинка">
        </div>
        <div class="item__suptitle">
          Lifestyle
        </div>
        <div class="item__subtitle">
          More than just a music festival
        </div>
        <div class="item__description">
          Здесь обрезается текст полностью
        </div>
      </div>
      <div class="main__item">
        <div class="item__image">
          <img src="item.png" alt="Картинка">
        </div>
        <div class="item__suptitle">
          Lifestyle
        </div>
        <div class="item__subtitle">
          More than just a music festival
        </div>
        <div class="item__description">
          Здесь обрезается текст полностью
        </div>
      </div>
      <div class="main__item">
        <div class="item__image">
          <img src="item.png" alt="Картинка">
        </div>
        <div class="item__suptitle">
          Lifestyle
        </div>
        <div class="item__subtitle">
          More than just a music festival
        </div>
        <div class="item__description">
          Здесь текст который обрезан, но после переноса на одну строку он не обрезается.
        </div>
      </div>
      <div class="main__item">
        <div class="item__image">
          <img src="item.png" alt="Картинка">
        </div>
        <div class="item__suptitle">
          Lifestyle
        </div>
        <div class="item__subtitle">
          More than just a music festival
        </div>
        <div class="item__description">
          Здесь текст который обрезан, но после переноса на одну строку он не обрезается.
        </div>
      </div>
    </div>
  </div>
</section>

БЛОГ НА HUSL

Обрезается текст, css. Решение без js

Ответы (0 шт):