質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CodeIgniter

CodeIgniterは、PHP向けオープンソースのWebアプリケーションフレームワークです。CodeIgniterは覚える構文が少なく、自由度も高いため、PHPを理解していれば構築が簡単です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

4073閲覧

動的に表示されるテキストの折り返しについて

Blue_Balloon

総合スコア10

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

CodeIgniter

CodeIgniterは、PHP向けオープンソースのWebアプリケーションフレームワークです。CodeIgniterは覚える構文が少なく、自由度も高いため、PHPを理解していれば構築が簡単です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/02/24 22:55

編集2017/02/24 23:52

###前提・実現したいこと
動的なテキストの折り返し

テキストの折り返しについてです。
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は必須です。

デザイン面が素人な故に検討が付かない状態です。
識者の方、お力添えを頂けますでしょうか。

よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

CSSのcolumnsを使うといいかもしれません。
サンプル

HTML

1<a id="reduce" href="#">reduce</a> 2<div id="wrapper"> 3<p>フォーム1は必須です。</p> 4<p>フォーム2は必須です。</p> 5<p>フォーム3は必須です。</p> 6<p>フォーム4は必須です。</p> 7<p>フォーム5は必須です。</p> 8<p>フォーム6は必須です。</p> 9<p>フォーム7は必須です。</p> 10<p>フォーム8は必須です。</p> 11<p>フォーム9は必須です。</p> 12<p>フォーム10は必須です。</p> 13</div>

CSS

1p{ 2 margin:0; 3} 4#wrapper{ 5 height:5em; 6 line-height:1; 7 -moz-columns:2 ; 8 -webkit-columns:2; 9 columns:2; 10 -moz-column-fill:auto; 11 -webkit-column-fill:auto; 12 column-fill:auto; 13} 14.reduce p:nth-child(2n){ 15 display:none; 16}

javascript

1var wrapper = document.getElementById('wrapper'); 2document.getElementById('reduce').addEventListener('click', e => wrapper.classList.toggle('reduce'));

ただ、対応状況にちょっと不安がありますので、素直にflex使った方がいいかもしれませんね。

参考:
https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

投稿2017/02/25 01:11

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Blue_Balloon

2017/02/26 04:40

ご返信有難うございます。試してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問