kdcsライブラリー

wordpressの投稿で改行するとpタグに が入って空白の改行が出来てしまう。
この空白の改行がスマホ画面で邪魔になる場合に非表示にする方法。

例は画面幅640px以下の場合に 入りのpタグを非表示にする方法

javascript

//画面幅640px以下で空白のpタグを非表示にする----------------
const mediaQuery = window.matchMedia("(max-width: 640px)");

function hideEmptyPTags(event) {
  if (event.matches) {
    document.querySelectorAll("p").forEach(p => {
      if (p.innerHTML.trim() === " ") {
        p.style.display = "none";
      }
    });
  } else {
    // 画面幅が640pxを超えた場合、元に戻す（必要に応じて）
    document.querySelectorAll("p").forEach(p => {
      if (p.innerHTML.trim() === " ") {
        p.style.display = "block";
      }
    });
  }
}

// イベントリスナーを追加
mediaQuery.addEventListener("change", hideEmptyPTags);

// 初回チェック
hideEmptyPTags(mediaQuery);