質問: ### 前提・実現したいこと 動的なテキストの折り返し テキストの折り返しについてです。 php(codeigniterを使用)から出力される、以下のようなフォームバリデーションメッセージが有ります。 ``` フォーム1は必須です。 フォーム2は必須です。 フォーム3は必須です。 フォーム4は必須です。 フォーム5は必須です。 フォーム6は必須です。 フォーム7は必須です。 フォーム8は必須です。 フォーム9は必須です。 フォーム10は必須です。 ``` これを以下のように、5行目で折り返して2列に表示したいのです。 ``` フォーム1は必須です。 フォーム6は必須です。 フォーム2は必須です。 フォーム7は必須です。 フォーム3は必須です。 フォーム8は必須です。 フォーム4は必須です。 フォーム9は必須です。 フォーム5は必須です。 フォーム10は必須です。 ``` なお、バリデーションメッセージなので出現しない場合も有り、5個以下の場合は各テキストを詰めて左側へ1列にまとめたいのです。 以下のような感じです。 ``` フォーム1は必須です。 フォーム5は必須です。 フォーム7は必須です。 ``` デザイン面が素人な故に検討が付かない状態です。 識者の方、お力添えを頂けますでしょうか。 よろしくお願い致します。
回答: CSSの`columns`を使うといいかもしれません。 サンプル ``` reduce フォーム1は必須です。 フォーム2は必須です。 フォーム3は必須です。 フォーム4は必須です。 フォーム5は必須です。 フォーム6は必須です。 フォーム7は必須です。 フォーム8は必須です。 フォーム9は必須です。 フォーム10は必須です。 ``` ``` p{ margin:0; } #wrapper{ height:5em; line-height:1; -moz-columns:2 ; -webkit-columns:2; columns:2; -moz-column-fill:auto; -webkit-column-fill:auto; column-fill:auto; } .reduce p:nth-child(2n){ display:none; } ``` ``` var wrapper = document.getElementById('wrapper'); document.getElementById('reduce').addEventListener('click', e => wrapper.classList.toggle('reduce')); ``` ただ、対応状況にちょっと不安がありますので、素直にflex使った方がいいかもしれませんね。 参考: