display:table-cell内でこんなに都合の良い改行は可能ですか？

Question

display:table-cell内でこんなに都合の良い改行は可能ですか？こんにちは。下のようにhtmlとCSSで定義しています。

国

日本中国イギリスアメリカドイツアラブ首長国連邦メキシコ

.parent{ display:table; table-layout:fixed; width:300px; } .child1{ display:table-cell; width:100px; } .child2{ display:table-cell; width:200px; /*child2の横幅は全角文字6文字分*/ } これを下記のように出力したいです。ブラウザ ←child2の横幅は全角文字6文字分→ --------------- 　｜日本中国　｜イギリス国｜アメリカ　｜ドイツ　｜アラブ首長国　　連邦 --------------- 表示がうまくいってないかもしれないので言葉で説明します。・child2の横幅は全角文字6文字分です。・全角6文字以下の国名は改行無しで表示。・日本と中国のように全角合計4文字で間が半角1文字という合計の全角6文字以内の場合、両者を同じ行に表示(半角スペースで分ける) ・アラブ首長国連邦のように全角6文字を超える場合は、前の国名の次に表示して、はみ出す分は改行して書く。ググっていて、display:table-cell;を利用している場合は改行は普通と異なるとか見たり、 word-wrap:、overflow-wrap:、white-space:、text-wrap:、word-break:などを駆使してみましたが、希望のことは出来ませんでした。こんな都合の良い改行、可能ですか？

ORUKA1951 · Accepted Answer

仕様書を通読されたら気づかれると思います。仕様書全体にわたるコンセプトが理解できると思います。いくつか例を揚げておきます。　必ずリンク先を読んでください。--理解できると思いますし、今後とも参考になるでしょう。 HTML4.01 『2.4.1 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』　DIVやspanは、それ自体意味を持たないマークアップですから、idやclassを併用する必要がありました。その反省から・・『HTML5“とか”アプリ開発入門（1）：Webの3つの問題を解決する「HTML5」とは何なのか (2/2) - ＠IT( http://www.atmarkit.co.jp/ait/articles/1008/30/news106_2.html )』　の中ほど・・「【問題2】文書内に埋め込まれた「意味」が不明確」 HTML5 『NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.( http://www.w3.org/TR/2014/REC-html5-20141028/grouping-content.html#the-div-element )』　(訳)注意:著者には他により適切な要素ないときの最後の手段としてdiv要素を使用することが強く奨励します。div要素の代わりにより適切な要素を使用することは、読者のためにはより良いアクセシビリティを作者のためには簡単な保守性につながります。　他にも、HTML5 Doctor, helping you implement HTML5 today( http://html5doctor.com/ )とか・・　HTML5が勧告(2014/10/28)されましたが、class名はHTML5の新しい要素を参考にすると良いでしょう。さきのHTMLをHTML5で書くと

国

　　　　日本中国イギリスアメリカドイツ　　

　となります。figureをどういう場面で使用するかは調べてください。　spanはHTMLに用意されていない行内要素をclassなどをつけて識別するためです。 ★HTML5だと、 body 　|-- +header 　|-- -section 　　　|-- figure 　　　　　|-- h2 　　　　　|-- p 　　　　　　　|-- span　.country section figure p span.country{} 　のセレクタをご覧になると分かるように、メンテナンス性が向上するのは実際にウェブを開発されていると分かると思います。他人も自身も半年後に、HTMLの変更、デザインの変更などのメンテナンスをする事を想像されると良いでしょう。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) 　でチェック済 ★タブは＿に置換してあるので戻す。＿＿サンプル＿＿＿＿＿＿＿

＿＿

本文

＿＿

＿＿＿

国

＿＿＿

＿＿＿＿日本中国イギリスアメリカドイツアラブ首長国連邦メキシコ＿＿＿

＿＿

＿

＿＞htmlには装飾などデザインは書いていないつもりでした。ですので、『全てCSSに書いた』つもりでした。

国

　後日、分かりますか？

国

　　　　日本たとえ、今回はデザインでが必要ないにしても、書いておくと役立つ

Ogre7077 · Answer

child2 の中身を、箇条書きに変更

日本
中国
タイ
グレートブリテンおよび北部アイルランド連合王国
...

箇条書きの各項目を "inline-block" で表示させるこれで * 項目が同じ行に収まる → 同じ行に表示 * 項目が同じ行に収まらない → 改行してから表示 * 項目が一行に収まらない → 自分自身を途中で改行させるが実現できます

ORUKA1951 · Answer

デザインのためにHTMLを書いたらダメです。基本中の基本ですよ。たとえば、

国

　　　　日本中国イギリスアメリカドイツアラブ首長国連邦メキシコ　　

とマークアップされていたとします。この時点では、デザインは考えずひたすら文書構造をマークアップします。 ★DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 ) 　HTML4.01(1999年勧告)以降、最も重要なDIV,SPANの使い方　構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) ・child2の横幅は全角文字6文字分です。　その場合、幅はemで指定します。視角弱者のブラウザは文字が大きい場合があるので・全角6文字以下の国名は改行無しで表示。・日本と中国のように全角合計4文字で間が半角1文字という合計の全角6文字以内の場合、両者を同じ行に表示(半角スペースで分ける) ・アラブ首長国連邦のように全角6文字を超える場合は、前の国名の次に表示して、はみ出す分は改行して書く。 ★タブは＿に置換してあるので戻す。 div.section div.figure{ ＿width:11em; ＿margin:0 auto; ＿position:relative; ＿border-style:dotted none; ＿border-color:gray; ＿border-width:1px 0; } div.section div.figure p{ ＿margin-left:5em; ＿text-indent:0; ＿line-height:1.6em; } div.section div.figure h3{ ＿font-size:1.2em; ＿position:absolute; ＿top:0;left:0; ＿width:4em;height:100%; ＿display:table-cell; ＿text-align:center; ＿border-right:gray 2px solid; } div.section div.figure p span.country{ ＿display:inline-block; ＿max-width:6em; ＿background-color:yellow; }

display:table-cell内でこんなに都合の良い改行は可能ですか？

仕様書を通読されたら気づかれると思います。

child2 の中身を、箇条書きに変更

デザインのためにHTMLを書いたらダメです。

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング