まず、難解な質問のタイトルのためにお詫び申し上げます。テキストの複数の行は、自動である必要がありますが、代わりに100%です
HTML/CSSでは、複数の行のテキスト要素の内側にあるテキストの幅を継承する必要があります。これは、含まれているテキストが1行にまたがる場合にのみ実行されますが、テキストが複数の行にまたがる場合は、それ自体がwidth:100%;
に強制されます。ここで
は、問題のフィドルです:https://jsfiddle.net/guzvpe2q/
感謝。
まず、難解な質問のタイトルのためにお詫び申し上げます。テキストの複数の行は、自動である必要がありますが、代わりに100%です
HTML/CSSでは、複数の行のテキスト要素の内側にあるテキストの幅を継承する必要があります。これは、含まれているテキストが1行にまたがる場合にのみ実行されますが、テキストが複数の行にまたがる場合は、それ自体がwidth:100%;
に強制されます。ここで
は、問題のフィドルです:https://jsfiddle.net/guzvpe2q/
感謝。
divは実際にはその幅でプッシュされていますが、テキストはフィットできないため、行を押し下げる必要があります。
display:inline-block
も必要です。 http://stackoverflow.com/questions/ - それは最初の単語(正確に理想的ではない私が知っている)
見る(https://www.w3.org/TR/CSS21/visudet.html#inlineblock-width)
それは、それぞれの単語の周りに 'span'タグを置き、' inline-block'をコンテナとスパンの両方に適用すると、問題がまだ発生します。だから実際には、それは広げられていませんが、ブラウザはそれをそのまま扱います。これを見てください:https://jsfiddle.net/guzvpe2q/2/ – rorymorris89
計算された幅が含まれている要素(あなたのh1が座っている要素)よりも長い場合、それは100%幅のように見えますが、そうではありません - jsfiddleウィンドウの幅を広げて、どういう意味なのか見てみましょう。(もしあなたがいなくても)---これは役に立ちますか?https://jsfiddle.net/guzvpe2q/3/ – Stuart
ええ、私はあなたが何を意味しているか完全に理解しています。私はJavaScriptで計算を行い、コンテナー 'h1'に幅を適用することでこれを簡単に修正できますが、本当にJSが必要ですか? – rorymorris89
関連した後に手動で改行を追加することです周り
一つの方法34995740/css-when-inline-block-elements-line-break-parent-wrapper-does-not-fit-new-width –
@Paulie_Dありがとう、私はJS修正を適用する必要がありますねこれは浮動小数点数、フレックス、それ以外のすべてのものに適用されます)。 – rorymorris89