テキストの見出しの幅を一致させる幅

Question

見出しとテキストをそれぞれ囲む複数のdivがあります。いくつかの見出しは手動で<br />と隣接する段落のテキストを設定します。私は、テキストの幅を見出しの最も広い部分と同じにします。

純粋にCSSでこれを行うにはどうすればよいですか？

.flex-text { 
 
     align-items: center; 
 
     display: flex; 
 
     justify-content: start; 
 
     color: #007990; 
 
     flex-direction: column; 
 
    } 
 
    
 
    .flex-text p { 
 
     color: #545641; 
 
     text-align: justify; 
 
    }

<div class='flex-text'> 
 
     <h3>Supercool heading <br />done nicely</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div>

Answer 1

あなたは、この使用してCSSのテーブルを行うことができ、あなただけの1%や小さな何かに親要素と設定幅にdisplay: tableを設定し、見出しをwhite-space: nowrapを使用する必要があります。

このように見出しは、brタグを使用した行とブレークラインにとどまり、テキストはこの場合最も広い要素または見出しと同じ幅になります。この最大幅は、あなたは、単にタイトルとコンテンツの両方を囲むラッパーでこれを行うと、そのラッパーにmax-width

を与えることができ、コメントになり示唆された

div { 
 
    text-align: center; 
 
    border: 1px solid black; 
 
    display: table; 
 
    margin: 0 auto; 
 
    width: 1%; 
 
} 
 
h1 { 
 
    white-space: nowrap; 
 
}

<div> 
 
    <h1>Lorem ipsum dolor sit amet <br> consectetur.</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fugit minus, ad dicta ullam odio temporibus optio voluptatibus nisi, voluptatum molestias at. Molestiae maiores molestias ducimus praesentium vero, iusto laboriosam.</p> 
 
</div>

Answer 2

あなたのヘッダーが何であっても等しい。ヘッダは手動で既に設定されているので、これはあなたのケースではうまくいくはずです。

.flex-text { 
 
     align-items: center; 
 
     display: flex; 
 
     justify-content: start; 
 
     color: #007990; 
 
     flex-direction: column; 
 
    } 
 

 
    .item { 
 
     max-width: 153px; 
 
    } 
 
    
 
    .flex-text p { 
 
     color: #545641; 
 
     text-align: justify; 
 
    }

<div class='flex-text'> 
 
     <h3 class="item">Supercool heading <br />done nicely</h3> 
 
     <p class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div>

Answer 3

使用このコード

.flex-text{ 
 
    max-width:270px; 
 
    margin:0 auto; 
 
} 
 
.flex-text h3{ 
 
    text-align:center; 
 
    color: #545641; 
 
    font-size:32px; 
 
    line-height:100%; 
 
} 
 
.flex-text p{ 
 
    text-align:justify; 
 
}

<div class='flex-text'> 
 
    <h3>Supercool heading done nicely</h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
</div>