“min-width: 768px”時には〇〇〇という感じ。

HTML

<div class="card card-body">
  <h3 class="card-title">タイトルタイトルタイトルタイトル</h3>
  <p class="lines">文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります文章が入ります。文章が入ります文章が入ります文章が入ります文章が入ります。</p>
</div>

Javascript/jQuery

// min-width: 768px クラスを付与・差し替える

$(window).on('load', function() {
  $('.card-body').find('.lines').each(function ( index, value ) {
    if (window.matchMedia('(min-width: 768px)').matches) {
      $(this).attr('class', 'card-text lines-1');
    } else {
      $(this).attr('class', 'card-text lines-2');
    }
  });
});

min-width: 768px は、タブレットやパソコンの時。
でなければ、スマホの時、と考えられますので
スマホとそれ以外の時で変化するものがある場合に使えます。

find ～ each は、上記の例でいうと
.card-bodyの下（子）にある.linesを探します。（ひとつだけではなくループ。繰り返し処理。）
もし”min-width: 768px” だったら、”card-text lines-1″クラスを付与。
でなければ、”card-text lines-2″クラスを付与、となります。

前回は matchMedia()とquerySelector() を使っての覚書でしたが、
今回は、matchMedia()とquerySelectorAll() を使っての覚書。
※ querySelector() はページ内の最初の要素ひとつだけですが、 querySelectorAll() はページ内の該当する全ての要素を返します。

以下は、trunk8.jsを使用して、min-width: 768px 時には2行（class名：lines2を追加 ／lines3を削除 ）、でなければ3行表示 （class名：lines3を追加／lines2を削除） にする例です。
※IE11は”forEach”はサポート対象外です。

Javascript/jQuery

const trunkLines = document.querySelectorAll('.trunk');
const mediaQueryList = matchMedia('(min-width: 768px)');
mediaQueryList.addListener(onMediaQueryChange);
function onMediaQueryChange (mediaQueryList) {
  if (mediaQueryList.matches === true) {
    trunkLines.forEach((elem) => {
      elem.classList.add('lines2');
      elem.classList.remove('lines3');
    });
  } else {
    trunkLines.forEach((elem) => {
      elem.classList.add('lines3');
      elem.classList.remove('lines2');
    });
  }
}
//ページ表示時に実行しておく
onMediaQueryChange(mediaQueryList);
// trunk8 lines
$( function () {
  $('.lines2').trunk8({ lines: 2 });
  $('.lines3').trunk8({ lines: 3 });
});

HTML

<p class="trunk">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。</p>
<p class="trunk">小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。</p>
<p class="trunk">querySelectorAll() はページ内の 該当する要素を全てを返しますので、複数あっても全て返してくれます。querySelector()は最初のひとつだけしか返しません。</p>

CSS

.trunk {
  display: block;
  word-break: break-all;
  width: 300px;
}

ブレークポイントで処理を振り分ける方法は色々ありますが
今回は matchMedia()とquerySelector() を使っての覚書。
※ querySelector() は、最初のひとつの要素しか返しません。よって、一カ所でしか使えません。

matchMedia()

// 768px以上ならtrue
matchMedia('(min-width: 768px)').matches;
// 767.98px以下ならtrue
matchMedia('(max-width: 767.98px)').matches;
// 768px以上、1199.98px以下ならtrue
matchMedia('(min-width: 768px) and (max-width: 1199.98px)').matches;
// orientation: portrait は縦横比 landscape/portrait
matchMedia('(orientation: portrait)').matches;

上記を踏まえて、具体的な書き方例①

Javascript

const mediaQueryList = matchMedia('(min-width: 768px)');
// addListener() メディアクエリに一致時に処理実行
mediaQueryList.addListener(() => {
  // ここに実行したい処理を書きます
  console.log('mediaQueryList');
});

上記を踏まえて、具体的な書き方例②

boopstrap4の”Cards”を使用して、テキスト部分はPCでは4行表示、スマホでは3行表示。
trunk8.js にて文字列の後ろに「…」を付ける。
デフォルトで4行用classを入れておいて、3行表示用のclassを追加/削除する という手も （その逆も） ありますが、ここでは敢えて、3行用と4行用のclassを同時に追加（add）/削除（remove） しています。

HTML

// trunk8 読み込み
<script src="js/trunk8.js"></script>
// bootstrap4 Cards
<div class="card" style="width: 20rem;">
  <div class="card-body">
    <h5 class="card-title">お知らせタイトルですよ</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text d-inline-block trunk34">お知らせテキストですお知らせテキストですお知らせテキストですお知らせテキストですお知らせテキストですお知らせテキストですお知らせテキストですお知らせテキストですお知らせテキストですお知らせテキストですお知らせテキストですお知らせテキストです</p>
  </div>
</div>

Javascript

const trunk34 = document.querySelector('.trunk34');
const mediaQueryList = matchMedia('(min-width: 768px)');
mediaQueryList.addListener(onMediaQueryChange);
  
function onMediaQueryChange (mediaQueryList) {
  if (mediaQueryList.matches === true) {
    trunk34.classList.add('lines4');
    trunk34.classList.remove('lines3');
  } else {
    trunk34.classList.add('lines3');
    trunk34.classList.remove('lines4');
  }
}
onMediaQueryChange(mediaQueryList);
// trunk8の行設定
$(function () {
  $('.lines3').trunk8({ lines: 3 });
  $('.lines4').trunk8({ lines: 4 });
});