最近のWebサイトは多数のデバイス、多数の幅に合わせたレスポンシブデザインが求められてます。しかし幅が変わるとデザイナーの意図した描画にできない場合もあります。特にテキスト量に依存した処理は行数が変わると面倒です。 一例として使えるのがper-word-actionです。行ごとにデザインを変えることができるライブラリです。

per-word-actionの使い方

デモです。幅を変えて文字の配置が変わると、それに合わせて文字の色が変わっています。

per-word-actionは行または単語単位で処理をできるようにするライブラリです。すべての単語はpwa-wordというクラスが追加され、各行ごとにpwa-line要素に行数が入ります。後はCSSなどでデザインすれば良いでしょう。

per-word-actionはjQuery/JavaScript製のオープンソース・ソフトウェア（ISC License）です。

per-word-action & per-line-action demo jakedowns/per-word-action: A jQuery plugin utility which idempotently wraps every word within an element in a unique span and assigns each word a line-number data attribute. Takes a per-word callback function as an argument.