Javascript HTML元素的自适应高度

我目前正在使用slick slider制作一条时间线，我正在试图找到一种方法，使时间线的每个子项的垂直线根据文本的高度而改变高度

您可以在此页面底部找到我当前的时间线：

“alt=”“>

$（'.time-line wrapper'）。光滑({
懒洋洋的：“ondemand”，
幻灯片放映：3，
幻灯片滚动：1，
箭头：是的，
无限：错
});
$（窗口）.on（'setPosition'，函数（事件，滑动）{
slick.$slides.css（'height'，slick.$slideTrack.height（）+'px'）；
}); 

当字符数达到一定数量时，我们可以设置特定的行高。 在本例中，当我们超过150个字符的限制时，我将高度设置为50px

我们需要循环所有时间线，并执行以下操作：

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

使用您的代码的小提琴：

您可以将上面的代码粘贴到浏览器控制台中查看更改！使用我的笔记本电脑屏幕，当我们限制150个字符并将50px设置为新高度时，效果最佳

您也可以使用php强制在循环中的元素上设置样式

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

>

问题是？如果你想展示一些设计，你还应该包括屏幕截图。当你链接的网站重新设计，或者突然停止工作时，这个问题对于未来的访问者来说是非常不清楚的。@MagnusEriksson我试着用他的设计做了一把小提琴！希望这会有所帮助！