Die Breite des Textes stimmen mit den Überschriften überein Breite

Question

Ich habe mehrere divs, die eine Überschrift und einen Text enthalten. Einige der Überschriften haben einen manuell gesetzten <br /> und angrenzenden Textabschnitt. Ich möchte, dass die Breite des Textes mit der breitesten Stelle der Überschrift übereinstimmt.

Wie mache ich das rein mit 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

Sie diese Tabellen mit CSS tun könnte, Sie display: table auf übergeordnete Element festlegen müssen gerade und 1% oder etwas kleiner und dann white-space: nowrap setzen Breite verwenden auf Position.

Dieser Weg wird in einer Zeile bleiben und Zeile, wo Sie br Tag und Text haben wird die gleiche Breite als breiteste Element oder Überschrift in diesem Fall haben.

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

Wie in den Kommentaren vorgeschlagen, dass Sie einfach dies mit einem Wrapper, der sowohl den Titel und den Inhalt und gibt, dass die Verpackung einen max-width

Diesen max-width umgeben würde gleich sein, was auch immer Ihre Kopfzeile ist. Dies sollte in Ihrem Fall funktionieren, da die Header bereits manuell gesetzt sind.

.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

Verwenden Sie diesen Code

.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>