ブログカードのタイトル等を指定した幅で制限をかけ、文末に三点リーダ(…)を追加してみます。
JavaScriptで文字数を判定する方法はこちら。
完成イメージ
幅で指定するため、１行の表示になります。
実装
表示させる幅を width で指定します。
<p class="txt-limit">このテキストを省略させたいこのテキストを省略させたいこのテキストを省略させたいこのテキストを省略させたいこのテキストを省略させたいこのテキストを省略させたいこのテキストを省略させたいこのテキストを省略させたい</p>.txt-limit {
width: 300px; /* 任意の幅 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* 末尾に三点リーダ(…)を追加 */
}【参考】text-overflow – CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow
