Как мне вместить весь текст на карточке

Question

У меня есть 2 столбца макета - 2 строки с 2 картами в каждой, так что всего 4.

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

Вот изображение

Это HTML-код раздела. Текст в настоящее время жестко запрограммирован, но в будущем будет динамичным.

.testimonials {
  margin-top: 100px;
}

.testimonials h2 {
  text-align: center;
  font-size: 48px;
  margin-bottom: 15px;
}

.testimonials .subtitle {
  text-align: center;
  font-size: 18px;
  line-height: 150%;
  margin-bottom: 50px;
}

.cards {
  margin: 0 15%;
}

.cards:after {
  content: "";
  display: table;
  clear: both;
}

.card {
  background: #fff;
  float: left;
  height: 330px;
  width: 48%;
  margin: 0 2% 2% 0%;
  padding: 3rem;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, .2), 0 3px 4px 0 rgba(87, 87, 87, .1);
  border-radius: 4px;
  position: relative;
}

.card p {
  font-size: 16px;
  font-weight: 500;
  line-height: 140%;
  position: absolute;
  margin: 0 7% 0 2%;
}

.card img {
  border-radius: 50%;
  height: 45px;
}

<section class="testimonials">
  <div class="row">
    <h2>Make your schedule work for you.</h2>
    <p class="subtitle">We built Happy Schedule for ourselves first, and you could say we were happy with the result.</p>

    <div class="cards">

      <div class="card">
        <p class="review">“One of the most user friendly and time saving aspects of Happy Schedule is the ability to easily set days and weeks in a different time zone. It made traveling over the past couple of months such a breeze, and so much less stressful to not worry
          about whether or not I had set the correct hours for my day. Huge relief!”</p>
        <img src="resources/img/user-01.jpg">
        <div>
          <p>Sasha Stone</p>
          <p>Florida, USA</p>
        </div>
      </div>

      <div class="card">
        <p class="review">The ability to save different templates of weekly schedules is a great time saver for teams that work on variable weekends. Team members like me have a few patterns to manage their week that can be easily saved and applied in a matter of seconds</p>
        <img src="resources/img/user-02.jpg">
        <div>
          <p>Nagesh Pai</p>
          <p>Mumbia, India</p>
        </div>
      </div>

      <div class="card">
        <p>“The colors and interface are very user-friendly. When I started as a Happiness Engineer at Automattic there was so much to learn about scheduling, but the good design of Happy Schedule made me feel calmer.”</p>
        <img src="resources/img/user-03.jpeg">
        <div>
          <p>Desiree Farnum</p>
          <p>Florida, USA</p>
        </div>
      </div>

      <div class="card">
        <p>“The drag-and-create user experience is a lifesaver. Our previous third-party tool required endless clicking to construct a schedule, which frayed our patience and could be punishing on our mouse hands. Even with more than 200 employees in one
          view, this tool removed the pain from our process.”</p>
        <img src="resources/img/user-04.jpg">
        <div>
          <p>Denise Williams</p>
          <p>Ontario, Canada</p>
        </div>
      </div>

    </div>
  </div>

</section>

Answer 1

Текст над изображением - это первая проблема, с которой вам нужно разобраться. Чтобы избежать этого, вы можете использовать shape-outside css, чтобы обернуть текст так, чтобы текст появлялся рядом и под изображением, но не накладывался на него. Пример

Что касается определения высоты, я бы удалил абсолютное позиционирование с карты p и добавил бы высоту с помощью * 1006. * Авто предпочтительнее прокручивать, так как при переполнении в значение прокрутки будет отображаться полоса прокрутки, независимо от того, не переполняется ли элемент или нет. Вы можете использовать overflow-y, если хотите иметь вертикальную прокрутку на всех картах, хотя

Надеюсь, это поможет

Перенос текста / изображения:

.sq {
  width: 80px;
   height: 80px;
  margin: 7px;
  background: forestgreen;
  color: #111;
  border-radius: 10%;
  text-align: center;
  font-size: 15px;
  float: left;
  shape-outside: (80px 80px 80px 80px, 10px);
}

span {
  padding-top: 10px;
  display: inline-block;
}

<div class="sq"><span>Image</span></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
  publishing software
</p>
<p> like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
  and scrambled it to make a type specimen book.</p>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
  publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
  took a galley of type and scrambled it to make a type specimen book. </p>

Answer 2

Если вы не возражаете против полосы прокрутки, вы можете поместить overflow-y: scroll (или auto, если хотите) в класс .card в вашем css.

Однако, чтобы все элементы имели одинаковую высоту, вам может потребоваться запустить JS при загрузке страницы и / или изменении размера окна. Вы можете взять элемент с наибольшей высотой и установить все нужные элементы на его высоту. Это может быть немного излишним для того, что вы ищете.