抜粋の行数指定がうまくいかない

質問失礼します。
現在トップページ(固定ページ)の一部に、カスタム投稿ページの中のある特定の1ページの本文を表示させています。
抜粋の文字数指定ではなく、行数指定したくてjQueryを使ってやってみてるのですがうまくいきません。
参考記事(https://dezanari.com/jquery-trim-line-height/)を見ながら要素などを書き換えて使用しています。
どこを訂正するべきなのか、原因は何なのか、どなたかわかる方教えていただけませんでしょうか？
よろしくお願いいたします。

functions.php

//トップページ 最新ニュースのショートコード作成
function add_top_schedule() {

	/* （ステップ1）データの取得 */
	$query = new WP_Query(
			array(
					'post_type' => 'scheduling',
					'name' => '2021',
					//'posts_per_page' => 3,
			)
	);
	?>
	<?php
	/* （ステップ2）データの表示 */
	if ( $query->have_posts() ) : ?>
			<div class="scheduling_copy">
					<?php while ( $query->have_posts() ) : $query->the_post();?>
							<h2><?php the_title(); ?></h2>
							<p>投稿日：<?php echo get_the_date(); ?></p>
							<p><?php the_category(", "); ?></p>
							<p class="extract_line"><?php the_content(); ?></p>
							<a href="***" class="more">一覧表示</a>
							<?php if ( has_post_thumbnail() ) : ?>
									<p><?php the_post_thumbnail(); ?></p>
							<?php endif; ?>  
							<hr />
					<?php endwhile; ?>
			</div>
	<?php endif; wp_reset_postdata();
	}
	add_shortcode('top_sheduling', 'add_top_schedule');
	//ここまで トップページ 最新ニュースのショートコード作成

script.js

jQuery(function ($) {
  var $text = $('.extract_line');//対象のテキスト
  var $more = $('.more');//続きを読むボタン
  var lineNum = 3;//表示する行数
  var textHeight = $text.height();//テキスト全文の高さ
  var lineHeight = parseFloat($text.css('line-height'));//line-height
  var textNewHeight = lineHeight * lineNum;//指定した行数までのテキストの高さ
  
  // テキストが表示制限の行数を超えたら発動
  if (textHeight > textNewHeight) {
    $text.css({
      height: textNewHeight,
      overflow: 'hidden',
    });
    //続きを読むボタンクリックで全文表示
    // $more.click(function () {
    //   $(this).hide();
    //   $text.css({
    //     'height': textHeight,
    //     'overflow': 'visible',
    //   });
    //   return false;//aタグ無効化
    // });
  } else {
    // 指定した行数以下のテキストなら続きを読むは表示しない
    $more.hide();
  }
});