Raindrops1.347では、半角英数、全角機能などが、親ボックスをはみ出してしまう問題を解決するために、折り返しを制御するための新しいクラスを追加します。
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
My disease name is pneumonoultramicroscopicsilicovolcanoconiosis
このようにオーバーフローすると多くの場合レイアウトが壊れ、ユーザーの閲覧環境はひどいものになります。
Raindropsは、このような折り返しの制御が必要な時に使える 2つのクラスが準備されています。
- rd-break-word クラス
-
単語境界を考慮した折り返し
My disease name is pneumonoultramicroscopicsilicovolcanoconiosis -
<div style="background:yellow;width:180px;overflow:visible;" class="rd-break-word"> My disease name is pneumonoultramicroscopicsilicovolcanoconiosis </div>
- rd-break-all クラス
-
なにも考慮しないで折り返し
My disease name is pneumonoultramicroscopicsilicovolcanoconiosis -
<div style="background:yellow;width:180px;overflow:visible;" class="rd-break-all"> My disease name is pneumonoultramicroscopicsilicovolcanoconiosis </div>
このクラスの使用にあたっては、若干の制限もありますので、詳細は「折り返し制御 クラス」を参照ください