2016-09-21 11 views
1

まず、難解な質問のタイトルのためにお詫び申し上げます。テキストの複数の行は、自動である必要がありますが、代わりに100%です

HTML/CSSでは、複数の行のテキスト要素の内側にあるテキストの幅を継承する必要があります。これは、含まれているテキストが1行にまたがる場合にのみ実行されますが、テキストが複数の行にまたがる場合は、それ自体がwidth:100%;に強制されます。ここで

は、問題のフィドルです:https://jsfiddle.net/guzvpe2q/

これは何が起こるかです: enter image description here

これが起こるはずです:事前に enter image description here

感謝。

+0

関連した後に手動で改行を追加することです周り

一つの方法34995740/css-when-inline-block-elements-line-break-parent-wrapper-does-not-fit-new-width –

+0

@Paulie_Dありがとう、私はJS修正を適用する必要がありますねこれは浮動小数点数、フレックス、それ以外のすべてのものに適用されます)。 – rorymorris89

答えて

0

divは実際にはその幅でプッシュされていますが、テキストはフィットできないため、行を押し下げる必要があります。

display:inline-blockも必要です。 http://stackoverflow.com/questions/ - それは最初の単語(正確に理想的ではない私が知っている)

見る(https://www.w3.org/TR/CSS21/visudet.html#inlineblock-width

+0

それは、それぞれの単語の周りに 'span'タグを置き、' inline-block'をコンテナとスパンの両方に適用すると、問題がまだ発生します。だから実際には、それは広げられていませんが、ブラウザはそれをそのまま扱います。これを見てください:https://jsfiddle.net/guzvpe2q/2/ – rorymorris89

+0

計算された幅が含まれている要素(あなたのh1が座っている要素)よりも長い場合、それは100%幅のように見えますが、そうではありません - jsfiddleウィンドウの幅を広げて、どういう意味なのか見てみましょう。(もしあなたがいなくても)---これは役に立ちますか?https://jsfiddle.net/guzvpe2q/3/ – Stuart

+0

ええ、私はあなたが何を意味しているか完全に理解しています。私はJavaScriptで計算を行い、コンテナー 'h1'に幅を適用することでこれを簡単に修正できますが、本当にJSが必要ですか? – rorymorris89

関連する問題