Q&A
指定通りの表示だと思うのですが、どのようなものを期待していたのでしょうか？
ご回答者様
いつもお世話になっております。
「text-indent:100%」を指定した時の改行の挙動について教えていただけますと幸いです。
例えば以下のコードがあったとします。
html
1<div class="div-width"> 2 <p class="p-indent">高額買取の特徴</p> 3</div>
css
1.div-width{ 2 width:300px; 3} 4.p-indent { 5 background-color: #f88; 6}
＜Chromeブラウザ表示＞
HTMLは同じで、cssにtext-indent:100%を追加すると、次の表示となります。
css
1.p-indent { 2 text-indent: 100%; 3 background-color: #f88; 4}
＜Chromeブラウザ表示＞
なぜ、text-indent:100%を指定すると、テキストの1文字目だけ親要素の幅を超えるのでしょうか？
これはtext-indent:100%ではなく、text-indent:1000pxといった親要素以上の幅を指定しても同じ現象が起きています。
＜Chromeブラウザ表示＞
テキストの1文字目だけ親要素の幅を超える理由・理屈についてご教授くださいますと幸いです。
以上、ご回答のほど何卒よろしくお願いします。
回答3件
0
text-indent
まだ、深く読んでいませんが、仕様上の説明で折り返しについても言及されているようですね。
https://triple-underscore.github.io/css-text-ja.html#propdef-text-indent
基本的に、text-indent は字下げ目的で使いますので、折り返しによる改行を期待することには違和感があります。
HTML
1<div style="text-indent: 100%; padding: 0; border-style: 0">あかさたな</div>
上記HTMLで期待するのは1行分の空行を開けることですか？
ならば、「margin や paddingが適切なのでは」と思います。
字下げは「行内で文字が残ること」に意味があります。
text-indentの影響範囲は1行目のみ
text-indentの仕様には、次の一文があります。
https://triple-underscore.github.io/css-text-ja.html#propdef-text-indent
影響されるのは、キーワード［ each-line ／ hanging ］により 他が指定されない限り，要素の整形される最初の行に限られる。
この場合、次のように無限ループする可能性があります。
- text-indent によるインデント及び自動折り返しによって、2行目に行頭の1文字目が存在する場合、条件を満たさず、インデントされない
- インデントされないなら、1文字目は1行目となり、text-indentが働く
- 1.に戻る (無限ループ)
この無限ループを回避する為に、あえて1文字目は必ず1行目になるように実装されている、と仮定する事は出来ます。
Re: bah91929 さん
投稿2018/12/14 04:04
編集2018/12/14 12:36
総合スコア18194
0
ベストアンサー
なぜ、text-indent:100%を指定すると、テキストの1文字目だけ親要素の幅を超えるのでしょうか？
これは、質問者の勘違いです。テキストの1文字目が親要素を超えたのはたまたまです。
html
1<div class="div-width"> 2 <p class="p-indent">sale! 高額買取の特徴</p> 3</div>
たとえば、↑このHTMLの場合、親要素を超えるのは「sale!」の部分です。
もう、お分かりかと思いますが、これは以前にbah91929さんがご質問になった、文字の折り返しの問題です。
HTML - 長い英単語やURLがボックスやテーブルからはみ出る理由について｜teratail
なぜ、1文字目の手前で折り返さないのか、についてですが、確信はないのですが、以下のようなことではないでしょうか。
For soft wrap opportunities before the first or after the last character of a box, the break occurs immediately before/after the box (at its margin edge) rather than breaking the box between its content edge and the content.
5.1. Line Breaking Details | CSS Text Module Level 3
勝手訳「ボックス内の文字について、最初の文字の手前、または最後の文字の後で折り返し機会が発生した場合は、コンテンツ辺とコンテンツの間に折り返すのではなく、ボックスのマージン辺に接して折り返す。」
1文字目の手前で折り返した場合、折り返した行は上記のとおりマージン辺に接して折り返されます。これは1行目ですから、1文字目の開始位置はtext-indentの影響を受け親要素の外になりますので、再び折り返し機会が1文字目の手前で発生します。その場合、上記のとおりマージン辺に接して折り返されます。これは1行目ですから、1文字目の開始位置はtext-indentの影響を受け親要素の外になりますので、再び折り返し機会が1文字目の手前で……
と、無限に続くからでは？
追記
私の意図するところが上手く伝わっていないようですので、追記します。
- 折り返しについては、実装上の問題ですので、どのような折り返し規則でもありえると思います。
- 当該実装は、ありえる折り返し規則のひとつだと思います。
- 私の回答は「このように実装すべき」というものではありません。あくまで私的な推測とお読みください。
投稿2018/12/13 07:53
編集2018/12/14 04:02
総合スコア37413
ご回答ありがとうございます。
「sale!」の件は、私も「aaaaあ」などと入力し、同じ挙動を確認しておりました。
ご回答くださった「1文字目の手前で折り返した場合、～～」の説明を繰り返し拝見いたしましたが、
まだ理解ができておりません。
1文字目の手前で折り返すなら、1文字目ごとマージン辺に接して折り返されて、すべての文字がボックス内に収まるのではないのでしょうか？
まあ、そういう実装も可能だとは思いますので、そういう表示をするブラウザが世の中のどこかにあっても特段おかしいことではないと思います。
以前の回答でも書きましたが、折り返しは仕様の問題というより実装の問題です。
どのように表示をするのが自然であるか、ということをどのように実装者が実装したか、という問題です。
個人的には、text-indent:calc(100%-1em); まではインデントされていて、text-indent:calc(100%-1em+1px);ではインデントが消失する、という実装よりは、当該表示の方が連続性があり自然に見えます。
横からですが、私も無限ループが発生する理屈が理解出来ていません。
今回は "padding: 0; border-style: none;" なので、content edgeとmargin edgeは同じ位置、というわけでいずれにしても同じ折り返し位置になります。
問題は1文字目の直後に折り返しが発生する理屈ですが、日本語訳を読んでも、直後/直前のどちらなのか明示されていないように読めます。
仕様てな明確にされていないので、「1文字目の直後に折り返す実装もあるでしょう」とするなら、まだ納得が出来るのですが…。
https://triple-underscore.github.io/css-text-ja.html#line-break-details
> 「1文字目の直後に折り返す実装もあるでしょう」とするなら、まだ納得が出来るのですが
ええ、回答にも書いたとおり推測ですし、実装上の問題ですから、そのような主張であるというご理解で結構です。
「そのような実装であるべき」とお読みになられたのであれば、私の表現の問題です。失礼しました。
Lhankor_Mhy様
いつもご回答ありがとうございます。
Lhankor_Mhy様の主張は以下という理解でよろしいでしょうか？
↓
text-indentや折返しの仕様はW3Cが決め、そのルールのもと各ブラウザが実装をする。
そしてW3Cは折返しについて、以下のようなコメントを出している。
ーー引用ーー
CSS does not fully define where soft wrap opportunities occur; however some controls are provided to distinguish common variations.
5. Line Breaking and Word Boundaries | CSS Text Module Level 3
（勝手訳）「CSSでは折り返し機会の出現について完全な定義をしていません。しかし、いくつかの共通バリエーションを区別するためのコントロールを提供しています」
ーー
折返し方法について完全な定義をしていないので、ブラウザ毎に折り返しの挙動が異なる。
上記でお間違いないでしょうか？
そうですね。
2つの質問を同時に伝えたのが良くなかったですね。
結論(ループ)だけ理解して、経過(ループの発生原理)が分からない、という意味です。
質問者以外に解読出来ない人がいないようですので、私の読解力不足なのでしょう。
いえ、2人いれば十分だと思います。
推測を回答するのに「妄想を垂れ流すようなものでは」という躊躇はありました。
やはり、混乱させるだけの結果だったようです。実装上の問題、で終わらせておくべきだったかと。
0
「text-indent:100%;」の場合、「親要素の幅」 に対する割合なので、親要素の外にはみ出します。
注意点として、単位が変われば、基準も変わったりします。
各プロパティや値と単位が、どこを基準とするのかを再度、確認されてください。
投稿2018/12/13 09:14
総合スコア3525
ご連絡ありがとうございます。
親要素の外にはみ出すのは理解できますが、
テキストの1文字目だけ親要素の幅を越え、それに続く文字が親要素内に折り返される理屈が分かれば幸いです。
ボックスモデル内のテキストは基本的に、その範囲内で折り返します。
英字（アルファベット等）と日本語は文字の設定が違うので、英字は1文節（空白等）が一塊として、日本語は1文字単位でtext-indentは対応します。
「text-indent」は最初の1文字目（英字は1文節目）に対する指示です。
「white-space: nowrap;」を設定していない場合は、ボックスの範囲内でテキストは折り返そうとします。
なので、今回の場合は、親の範囲（100％）分が、1文字目に対してインデント（字下げ）されて、折り返し機能が働き、CSSの設定どおりに、1文字目以降の2文字目から改行される形です。
値を80%にすると、親要素の範囲内の文字は1文字目に続いて表示されて、入りきれない所から改行されるのが分かるかと思います。
あなたの回答
tips
プレビュー
