行の長さに基づいてコンテナの幅を設定する

Question

左寄せ、右寄せ、完全に両端を合わせた行がある詩を設定する必要があります。コンテナの幅を推測するのではなく、特定の（最も長い）ラインに合わせる方法がありますか？

Wordのレイアウトを示すモックアップです（「これはセクションが測定される行です」という行があり、テキストが表示されるボックスのサイズが決まります）。

どのように私はCSSでこのレイアウトを達成することができますか？

Answer 1

<div>内の段落をネストすると、探している効果が得られます。 <div>を含む外側は、子でその幅を設定するには、display: inline-blockを使用する必要があります。

例のスニペットでは、中央の行が編集可能です。あなたは、コンテナのストレッチを参照して一致させるために縮小した文字を追加または削除することができます

.container { 
 
    border: solid; 
 
    display: inline-block; 
 
} 
 
.right-aligned { 
 
    text-align: right; 
 
}

<div class="container"> 
 
    <p>left aligned</p> 
 
    <p contenteditable="true">a full width line that sets the width of the container</p> 
 
    <p class="right-aligned">right aligned</p> 
 
</div>

ボックスの全幅を伸ばすために正当化ラインを取得するためには、いくつかを実装する必要があり擬似要素トリッキーでは、もう一つの答えはhereです。

あなたのケースでは、擬似要素:afterを正当なクラスに追加し、段落内に新しい行を作成するようにスタイルを設定します。これは、テキストの行が段落のように振る舞い、左右両側を正当化するはずです。

あなただけの正当段落の高さに設定することができ、空白行を取り除くために：

.container { 
 
    border: solid; 
 
    display: inline-block; 
 
} 
 
p { 
 
    border: 1px dotted red; 
 
} 
 
.right-aligned { 
 
    text-align: right; 
 
} 
 
.justified { 
 
    text-align: justify; 
 
} 
 
.justified:after { 
 
    content: ""; 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 
.no-space { 
 
    height: 1.2em; 
 
}

<div class="container"> 
 
    <p>left aligned</p> 
 
    <p contenteditable="true">a full width line that sets the width of the container</p> 
 
    <p class="right-aligned">right aligned</p> 
 
    <p class="justified">justified text with blank line</p> 
 
    <p class="justified no-space">justified text without the following blank line</p> 
 
</div>