[CSS] 文字数オーバーの3点リーダーを文字列の先頭に持ってくる裏技

先日、Filezillaを使っていたときに、ログの表示を見ていて、見栄えが少し気になったので、 今回は、それをWebシステムに置き換えたと仮定して、CSSで解決してみようと思う。

Filezillaでの気になった点

Filezillaのウィンドウの、赤枠の部分。 ちょうどキャプチャしたタイミングで、表示が出てなかったので、HTMLで書いてみると

サーバー/ローカルファイル	方向	リモートファイル	サイズ	優先度	状態
/Users/user-name/download/homepage.example.com/data/log/20260101_010101.log	<<--	/var/www/html/homepage.example.com/data/log/20260101_010101.log	100KB	通常	転送中
/Users/user-name/download/homepage.example.com/data/log/20260101_010102.log	<<--	/var/www/html/homepage.example.com/data/log/20260101_010102.log	100KB	通常	転送中
/Users/user-name/download/homepage.example.com/data/log/20260101_010103.log	<<--	/var/www/html/homepage.example.com/data/log/20260101_010103.log	100KB	通常
/Users/user-name/download/homepage.example.com/data/log/20260101_010104.log	<<--	/var/www/html/homepage.example.com/data/log/20260101_010103.log	100KB	通常
/Users/user-name/download/homepage.example.com/data/log/20260101_010105.log	<<--	/var/www/html/homepage.example.com/data/log/20260101_010103.log	100KB	通常

文字が入りきらない箇所で、 /Users/user-name/... このように、見切れた部分が ...（三点リーダー）になっているのがわかりますが、 FTPでのリスト表示をすると、root階層しか表示されないので、ほぼ全ての表示が同じになってしまいます。 よほどネスト（階層）が少ないのであれば、いいですが、ほとんどの環境で、三点リーダが表示されていると思います。 個人的には、この表示は、後方三点リーダーではなく、前方三点リーダーにした方がいいのでは？と思ったので、それをcssで実現してみたいと思います。 あ！ちなみに、この今回のブログは、Filezillaの表示を改善されるのではなく、 似たようなシステムを作った時に、CSSを使って、表示の前方3点リーダーをセットできるようにするための実験記事です。

CSSの前方三点リーダーは裏技で実現可能

デフォルトである、後方三点リーダーは、cssに以下のコードを書くだけで簡単に実現できます。 .target-cell{ white-space : nowrap; overflow: h idden; text-overflow: ellipsis; -webkit-text-overflow: ellipsis; /* Safari用 */ -o-text-overflow: ellipsis; /* Opera用 */ }

成功例

サーバー/ローカルファイル	方向	リモートファイル	サイズ	優先度	状態
/Users/user-name/download/homepage.example.com/data/log/20260101_010101.log	<<--	/var/www/html/homepage.example.com/data/log/20260101_010101.log	100KB	通常	転送中
/Users/user-name/download/homepage.example.com/data/log/20260101_010102.log	<<--	/var/www/html/homepage.example.com/data/log/20260101_010102.log	100KB	通常	転送中
/Users/user-name/download/homepage.example.com/data/log/20260101_010103.log	<<--	/var/www/html/homepage.example.com/data/log/20260101_010103.log	100KB	通常
/Users/user-name/download/homepage.example.com/data/log/20260101_010104.log	<<--	/var/www/html/homepage.example.com/data/log/20260101_010103.log	100KB	通常
/Users/user-name/download/homepage.example.com/data/log/20260101_010105.log	<<--	/var/www/html/homepage.example.com/data/log/20260101_010103.log	100KB	通常

どうでしょう？ ファイル名の連番が見えるようになって、同じ文字列が並ぶのを防げるようになりますよね。

注意点

ホームページでよく使う、CSSの三点リーダーは、複数行に対応できるようにもできますが、 今回の前方三点リーダーは、１行タイプじゃないと実現できません。 ちなみに、複数行の三点リーダーの書き方は、次のように書きます。 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; webkitとあるので、わかる人もいると思いますが、これは、SafariとGoogleChrome、Edgeでしか適用されません。 Firefoxは、対応できないので、事前に認識しておきましょう。 上記サンプルを見て気付いた人もいるかもしれませんが、 ...0101.log/ と、"/"（スラッシュ）が文字列の最後に表示されているのは何故か？ということを説明しておきます。 これは、CSSのバグではなくUnicodeの「双方向テキスト（BiDi）」のルールによるものです。

文字の分類：アルファベットや数字は「強力な左から右の文字（LTR）」ですが、スラッシュやハイフンは方向を持たない「中立文字」に分類されます。 配置の反転：direction: rtl を指定すると、ブラウザは全体を「右から左（RTL）」の言語（アラビア語など）として処理します。 スラッシュの誤認：先頭にあるはずの / が中立文字であるため、RTL環境下では「テキスト全体の末尾（つまり右側）」に配置し直されてしまい、結果として末尾に移動したように見えています。

気になる場合は、Javascriptを使って、文字列を修正する必要がありますが、今回は簡易にCSSだけで対応を目指していたので、この仕様を知ることができたというのもプラスに考えておきます。

あとがき

システム開発をする上で、UI/UXというのは、非常に重要な要素です。 最近では、UI/UXエンジニアというデザイナーの上位ポジションが存在するぐらい、重要視されてきています。 Filezillaでも、前方三点リーダー機能を採用してもらいたいし、今後自分で作るシステムも、三点リーダーを使う時に、前方、後方を使い分けるように意識づけたいと思います。