昨日の記事とほぼ同じタイトルですが、今回はCSSではなくJavaScriptで文章の文末を省略して末尾に三点リーダーを追加する方法です。
こちらは範囲からはみ出たかどうかではなく、文字数で判断をしています。
ちなみに、昨日の記事はこちらから。
【CSS】長い文章の文末を省略して末尾に「…」を表示させる方法
https://cpoint-lab.co.jp/article/201805/【css】長い文章の文末を省略して末尾に「」を/
こちらの記事では、CSSで指定した範囲からはみ出した文章の文末を省略しています。
複数行の表示には対応しておらず、省略後は1行の表示になります。
コードはこちら。
<p id="text"></p>
var text = "春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。";
var slicetext = text.length > 20 ? (text).slice(0,20)+"…" : text;
document.getElementById('text').innerHTML = slicetext;
文字数をカウントし、20文字以上だったら、slice メソッドを使って21文字目からをカットして、三点リーダーを追加しています。
そして、pタグの中に、そのカット後の文章を表示しています。
行っている処理はこれだけです！
JavaScriptで文末を省略する方法でした。
好みにもよりますが、明確に○文字以下で表示することが決まっている場合や、表示する範囲が不変で、かつ複数行で表示したいときなどに使えそうです。
1行だけ表示するなら、表示範囲も可変が可能なCSSで指定する方がよさそう。
このあたりは実装する内容によって使い分けてください。
