Как я могу предотвратить обрезание надписи с помощью lightSlider?

Question

Я написал некоторый код для добавления lightSlider , который извлекает информацию из различных полей ACF. Все работает нормально, но заголовок обрезается, если его длина больше двух строк.

Вы можете видеть то, о чем я говорю, на этой ссылке (или скриншоте ).

<div class="tl_slide_photo_container">
            <ul id="light-slider" class="image-gallery">
                <?php foreach( $images as $image ): ?>
                <li data-thumb="<?php echo $image['url']; ?>">
                    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['caption']; ?>" />
                    <div class="caption-group">
                        <div class="caption column">
                            <p><?php echo esc_html($image['caption']); ?></p>
                        </div>
                        <div class="photographer column">
                            <p><?php echo the_field('media_author', $image['id']); ?></p>
                        </div>
                    </div>
                </li>
                <?php endforeach; ?>
            </ul>
        </div>

lightSlider настроен со следующими настройками:

jQuery(document).ready(function($){

  $('.image-gallery').lightSlider({ 
        gallery:false, 
        item:1, 
        auto:false, 
        loop:true, 
    });

});