強制文本以包裹在無div寬的區域

是否可以將文本包裝在僅具有最小寬度的內嵌塊div內？（不寬，也不是最大寬度）強制文本以包裹在無div寬的區域

這裏就是我的意思是：

<style type="text/css"> 

    .container { 
    width:100%; 
    } 

    .field { 
    display: inline-block; 
    vertical-align: top; 
    min-width:25%; 
    } 

    label, input { 
    display: inline-block; 
    } 

    .alert { 
    display:block; 
    } 

</style> 


<div class="container"> 

    <div class="field"> 
     <label style="width:100px;">My Label</label> 
     <input style="width:200px;" type="text" /> 
     <div class="alert"> 
     This text should wrap at whatever width div.field actually is, and never push div.field out to the width of this text! 
     </div> 
    </div> 

    <div class="field">...another field...</div> 
    <div class="field">...another field...</div> 
    <div class="field">...another field...</div> 
    etc... 

</div>

注：

的label & input被inline-block所以一直停留在同一行，但div.alert是block，以便它出現在字段其他內容下方的新行中。
div.field僅具有最小寬度（未寬度或最大寬度），因爲當用戶改變窗口（和div.container寬度）以下應該發生：

一個。如果該字段的固定寬度內聯內容（在本例中爲LABEL + INPUT = 300px）小於div.container寬度的25％，則div.field應該恰好爲容器寬度的25％。

b。如果該字段的固定寬度內聯內容超過容器的25％，則應將該字段推出至其合併寬度。

那麼，有沒有辦法讓div.alert根據上面的規則根據字段的寬度進行換行？

來源

2012-09-28 Bumpy

我知道我是一個很老的線程，但它可能會幫助別人。有

.field { 
    width: min-content; 
}

它說，你的容器縮小到儘可能少的。爲了使用它，您必須確保標籤和輸入的寬度最小。但是，他們的固定大小完成了。但是，在這種情況下，與多個字段，他們將彼此相鄰包裹着，所以我建議

.container { 
    width: min-content; 
}

這裏有一個jsfiddle。

這不是完全跨瀏覽器，但是almost。我發現它here。

來源

2016-09-29 02:35:15 vendelin

認爲我應該接受這個答案，因爲它是CSS的要求，並且我用「min-content」和「max-content」等等來鞏固我的祕密CSS能力。謝謝！（噗！你'幾乎'和'這裏'的鏈接被有趣地顛倒過來。） – Bumpy

謝謝，我修好了。 – vendelin

不是沒有jQuery的，是這樣的：

$('.alert').width($('.alert').parents('.field').width());

來源

2012-09-28 05:25:14 KnowHowSolutions

好的，謝謝。我應該更具體一點，因爲我一直在尋找一種僅用CSS的解決方案，但無論如何你都已經回答了。 :-) – Bumpy

強制文本以包裹在無div寬的區域

回答

相關問題