長い文字列を区切って表示「Readmore.js」
Readmore.jsはJavaScript製のオープンソース・ソフトウェアです。
Webサイトを何らかのシステムを使って構築すると思いもしなかった入力が行われることがあります。その一つが文字列が予定よりも多く、ページが見づらくなってしまう場合です。そこで使ってみたいのがテキストの折りたたみ表示を行うReadmore.jsです。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 11.20.54.1374667628.png)
デモです。画面中央のRead Moreがあります。これをクリックします。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 11.20.58.1374667633.png)
広がりました。一番下にはCloseがあり、これをクリックするとまた元の表示に戻ります。
当たり前のように見えるのですが、広げた後の閉じるがきちんと用意されているのが好感です。なお指定は文字数ではなく、DOMの高さになります。そのため、半角全角がおり混ざったとしてもぎりぎりまで表示されるようになります。
MOONGIFTはこう見る
JavaScriptで画面のUIを操作すると、最初のアクションは格好よくとも、それを戻すアクションは不格好なことが多々あります。最悪、開くアクションはあるのに閉じる方がないこともあります。これではまさに片手落ちです。
Readmore.jsで面白いのはCloseボタンを押した時に、Read Moreのリンクの所にマウスが当たっていることです。コンテンツの高さが変わればマウスはそのまま残ってしまいそうですが、あえてスクロールして追従しているようです。これのお陰で可読性が随分向上しています。