省略表示の方法【html/css/js】

質問

表示領域から溢れた際の省略表示の方法についてです。

対象は１行です。
overflowしている場合に、三点リーダーを使って省略表示がしたいです。

CSSで、
overflow: hidden;
text-overflow: ellipsis;

を使うと、溢れた際に後ろに三点リーダーがつきますが、
三点リーダーの前に表示する文字数を制限したいです。

例えば以下の文言を表示した場合に、
「あいうえおかきくけこさしすせそ」
上記のCSSを適用して
「あいうえおかきくけこ...」と表示されるものを、
三点リーダーの前は３文字として
「あいう...」という表示にしたいです。

こういった三点リーダーの前の文字数を制限する方法ってありますでしょうか？

回答No.1

t_ohta · ベストアンサー

JavaScriptで個別に文字数をチェックして、例えば5文字以上なら3文字分だけ表示して三点リーダーを付けるみたいな処理をするしかないでしょうね。

回答No.2

celtis

文字数を指定するならJavaScriptが必要だと思います。
https://and-ha.com/coding/clamp/