有人考了我一道CSS題目
byzhangxinxu from ofollow,noindex" target="_blank">https://www.zhangxinxu.com/wordpress/?p=8097
本文可全文轉載，無需授權，只要保留原作者、出處以及文中連結即可。
一、有人考了我一道CSS題目
前段時間@快叫我韓大人私信我考了我下面這個題目：
截圖中的字略小，我重新整理了下：
題目要求：
-
P標籤的最大寬度不可以大於H2標籤文字寬度的10%這裡應該是P標籤的最大寬度由前面的匿名內聯元素寬度（就是大字號文字寬度）決定，可參見最後期望效果GIF示意。
- H2標籤不能失去高度（h2 文字高度+p 標籤高度 = h2 標籤高度）
HTML結構（不允許修改）
<h2> IPHONE XR<br> IS THE FUCKING<br> BEST EVER MADE <p>iPhone XR has not been authorized as required by the rules of the Federal Communications Commission. iPhone XR is not, and may not be, offered for sale or lease, or sold or leased, until authorization is obtained.</p> </h2>
基礎CSS樣式
h2{
font-size: 52px;
font-weight: bold;
color: #000;
}
p{
font-size: 12px;
color: #333;
}
初始效果
期望效果
請問在座的各位有沒有實現思路，可以將對應CSS程式碼寫在這個線上demo頁面的（Chrome瀏覽器開啟）“你的CSS”區域，可以看到實時效果：
大家現在可以開動腦筋想想怎麼實現了……
·
·
·
·
·
·
如果沒有思路，或者想看看別人的實現，可以接續往下看。
二、幾個佈局實現方法
先展示下我的實現：
h2 {
width: min-content;
white-space: nowrap;
}
p {
white-space: normal;
}
您可以狠狠地點選這裡： min-content下的佈局實現demo
效果如下截圖：
width:min-content 表示寬度收縮到最小，如果是預設狀態，寬度應該是最窄單詞的寬度，由於設定了 white-space:nowrap ，因此，寬度就是最長的那一行字元寬度（如果不太理解，可以買本《CSS世界》，內有深入講解），由於P標籤設定了 white-space:normal ，因此，最終寬度就是大字號標題的最長的那一行的寬度，最終實現預期效果。如果對 min-content 還不太瞭解，可以參見“ 理解CSS3 max/min-content及fit-content等width值 ”這篇文章。
下面這個是出題人的實現：
h2 {
display: table;
}
p {
display: table-caption;
caption-side: bottom;
}
您可以狠狠地點選這裡： min-content下的佈局實現demo
效果如下截圖：
這個方法要更好，相容性更強（IE8+）。
display:table-caption 表示元素的display水平表現為表格標題，自動自適應於外部表格容器寬度， caption-side:bottom 可以設定表格標題在底部，而 display:table 元素的寬度為 auto 的時候表現為“包裹性”（“shrink-to-fit”），因此，達到符合預期的效果。
三、歡迎補充你的實現方法
CSS各種屬性就像構成世界的基本元素，要實現某一種效果，往往會有多種組合方式，各有優劣，相信這裡的佈局實現也會有其他方法的，歡迎補充，不吝賜教。
當然，如果你有自認為不錯的CSS技巧，也歡迎和我交流，出題考我也是可以的！
本文為原創文章，會經常更新知識點以及修正一些錯誤，因此轉載請保留原出處，方便溯源，避免陳舊錯誤知識的誤導，同時有更好的閱讀體驗。
本文地址： https://www.zhangxinxu.com/wordpress/?p=8097
（本篇完）