指定の文字数を超えたら省略して「…」を付ける

はじめに

投稿一覧などで文字量の増減によるレイアウト崩れを防ぐために、
指定の文字数を超えると…（３点リーダー）を挿入して省略するというものです。

記述例

基本となるHTML

<p class="txt-limit">
  川上の方を見ながらそっと言いました。そしてきゅうくつな上着の肩を気にしながら、それではあんまり出し抜けだから、いま小さいの見えなかったのああ、三時ころ帰ったよ。ああそこにはクリスマストリイのように長く延びるのを見ましたら、車掌はまっすぐに立って、その中に、おかしな十ばかりの字を印刷したもので、太陽や地球もやっぱりそのなかに浮かんでいるところに来ました。ああ、りんどうの花のにおいのするはずはないとジョバンニは高く叫び返しましたが、このごろはジョバンニはまるで泣き出したいのをこらえておこったように席にもたれて睡っていました。りんごをひろってきて、もういまは列のように赤く光りました。
</p>

行単位で制限する場合はCSSだけでOK

1行で制限する場合（CSS）

.txt-limit {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

複数行で制限する場合（CSS）

.txt-limit {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 任意の行数を指定 */
}

文字数を指定して制限する場合

JavaScript

const limit = document.querySelector(".txt-limit");
const str = limit.textContent;
const len = 50; // 半角50字（全角約25字）
if (str.length > len) {
  limit.textContent = str.substring(0, len) + "…";
}

表示例

終わりに

行数指定ならCSSだけで実装できるので、
PCとスマホで簡単に行数を変えられて便利ですね。