文字の見た目上の長さで、文字数制限をアルファベット、数字、日本語にかけたい

実現したいこと

文字の見た目上の長さで、文字数制限をアルファベット、数字、日本語にかけたい

事象

PCでTwitterのホーム画面を見た際に、
左下に、自分のアイコンと、ユーザ名が表示されるが、

日本語の場合、

アルファベットの場合

と、文字数が一定以上になると3点リーダーで表示されており、
あいうえおかきく、では、9文字目、から
abcdefghijklmnop、でh、17文字目から、3点リーダーが表示されています。

現在、同じような、文字列がある一定の長さ（画面上に表示したい一定の幅）、になれば、3点リーダーとして画面上に
表示させるようなシステム(javascriptで文字列をチェックし、一定以上になると3点リーダーで表示)を考えていますが、
上記のような場合、また日本語、数字、アルファベットが混在するケースも含め、
どのように、文字列をチェックすれば良いかわからず、質問させて頂きました。

maisumakun

2022/12/18 13:03

> javascriptで文字列をチェックし、一定以上になると3点リーダーで表示どうしてもJavaScriptで実行しなければならないのですか？

nmty

2022/12/18 14:16 編集

フロントは、Next.jsを使用しているため、javascriptでの制御を検討しています。サーバーは、Pythonを使用しているため、pythonでの制御でも良いのですが、どのように文字数制限を行えば良いのかわからず質問致しました。日本語、アルファベット、数字のみで、◯○文字以上で3点リーダーを表示するのであれば、それぞれjavascriptのlengthで1つずつ確認(全て日本語であれば9文字以上で3点リーダーを表示等)できると思いますが、日本語、アルファベット、数字が混在する場合などの場合、どのようにチェックすれば良いかまだ想像できていません。

maisumakun

2022/12/18 14:17

> フロントは、Next.jsを使用しているため、javascriptでの制御を検討しています。 CSSではだめなのですか？

nmty

2022/12/18 14:19

>CSSではだめなのですか？ CSSでも良いです。