Адаптивная высота HTML элементов

Question

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

Вы можете найти мою текущую временную шкалу внизу этой страницы: Ссылка на временную шкалу

<?php if ( have_rows('timeline_repeater') ): ?>
<div class="time-line-wrapper wrapper">
  <?php while ( have_rows('timeline_repeater') ) : the_row(); ?>
    <div class="time-line-single">
      <div class="image">
        <?php $img = get_sub_field('image'); ?>
        <img src="<?= $img['url']; ?>" alt="<?= $img['alt']; ?>">
      </div>
      <div class="year">
        <span class="year-span"><?php the_sub_field('year'); ?></span>
      </div>
      <div class="content">
        <h3>
          <?php the_sub_field('h3'); ?>
        </h3>
        <?php the_sub_field('content'); ?>
      </div>
      <div class="line-detail">
        <div class="vertical-line"></div>
      </div>
    </div>
  <?php endwhile; ?>
</div>
<?php endif; ?>

$('.time-line-wrapper').slick({
  lazyLoad: 'ondemand',
  slidesToShow: 3,
  slidesToScroll: 1,
  arrows: true,
  infinite: false
});

$(window).on('setPosition', function(event, slick) {
  slick.$slides.css('height', slick.$slideTrack.height() + 'px');
}); 

Answer 1

Мы можем установить указанную c высоту строки, когда количество символов достигает определенного числа. В этом примере я устанавливаю высоту 50 пикселей, когда мы пересекаем ограничение в 150 символов.

Нам нужно l oop по всем временным шкалам и делать следующее:

$.each( $( ".time-line-single" ), function() {
    var cnt =  $( this ).find("p").text().length;
    if (cnt > 150) {
    $( this ).find(".vertical-line").css("height", "50px"); 
        }
});

Скрипка с использованием Ваш код: https://jsfiddle.net/dtswq9k6/

Вы можете вставить указанный выше код в консоль браузера, чтобы увидеть изменения! Используя экран моего ноутбука, он работает лучше всего, когда мы ограничиваем 150 символов и устанавливаем 50px в качестве новой высоты.

В качестве альтернативы вы можете использовать php для принудительной стилизации этого элемента в l oop!

  <div class="line-detail">
    <div class="vertical-line" <?php echo (strlen(get_sub_field('content')) > 150) ? 'style="height:50px;"' :''; ?>></div>
  </div>