使寬度文本匹配標題寬度

我有幾個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>

來源

2017-08-24 Hedge

把它放在一個'div'並給予'div'然後'MAX-width'放那裏有文字。 – Sand

最簡單的方法可能是將兩者都放在同一個容器中（'div'或任何你喜歡的），並給這個容器固定的寬度。雖然不是真正的動態解決方案。不過，我不確定你想要做什麼只需要CSS。 – domsson

我稍微改變了問題，並嘗試創建一個堆棧片段。 – Hedge

你可以做到這一點使用CSS表格，您只需要設置父元素display: table，並設置寬度1%或小東西，然後在標題使用white-space: nowrap。

這種方式標題將停留在一條線上，並且您使用的是斷線br標記和文本在此情況下與最寬的元素或標題具有相同的寬度。

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>

來源

2017-08-24 10:56:38

不錯！我從來沒有碰過「display：table」，所以我不知道這是可能的。用類似的方法，比如說'inline-block'還是flex？ – domsson

這確實很好。瀏覽器支持也約爲97％！ – Hedge

至於建議中的註釋，你可以簡單地圍繞標題和內容，並給予該包裝一個max-width

這個最大寬度將包裝做到這一點等於無論你的頭是什麼。這應該適用於你的情況，因爲標題已經手動設置。

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

來源

2017-08-24 10:59:23 Johannes

該方法不考慮通過'
'的手動換行。我在原始文章中添加了一個Stack代碼片段。 – Hedge

其實這正是它工作的原因，因爲你正在手動控制你正在控制寬度的中斷，因此你可以設置它。我會盡快更新我的答案。 – Johannes

使用此代碼

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

來源

2017-08-24 11:04:16

當'max-width'設置爲較高值（例如600px）時，此方法不再適用。文字太寬了。 – Hedge

使寬度文本匹配標題寬度

回答

相關問題