CSS3では長すぎる文字列を省略する機能があります。しかし、使いこなすのはなかなか難しく、JavaScriptなどと組み合わせるケースが多いでしょう。また、テキスト以外のコンテンツに対応していないのも問題です。 そこで紹介したいのがEripusisuです。多数のコンテンツ形式に対応したテキスト省略ライブラリです。

Eripusisuの使い方

こちらは省略表示です。

すべて表示した場合。

省略された場所にリンクが被っている場合。

省略を解除するとリンクになります。

リストも省略できます。

すべて表示でリストが追加表示されます。

フローティング表示も可能です。

すべて表示してもフローティングは維持されています。

さらに画像まで。

3つの画像が隠されていました。

インラインブロックでも使えます。

すべて表示すると3列のブロックに変わりました。

RTL(右側から表示する言語)にも対応しています。

Eripusisuはテキスト以外のコンテンツにも省略表示を実現します。Eripusisuを使うことで、余計な情報を隠しておいたり、画面の情報が多くなるのを防げるでしょう。色々な場面で使えそうです。

EripusisuはTypeScript製のオープンソース・ソフトウェア(MIT License)です。

Eripusisu Examples tsmd/eripusisu: Text truncation library