有人考了我一道CSS题目

作者 | 张鑫旭

来源 | https://www.zhangxinxu.com

前段时间@快叫我韩大人私信我考了我下面这个题目：

截图中的字略小，我重新整理了下：

题目要求：

P标签的最大宽度不可以大于H2标签文字宽度的10%

这里应该是P标签的最大宽度由前面的匿名内联元素宽度（就是大字号文字宽度）决定，可参见最后期望效果GIF示意。

H2标签不能失去高度（h2 文字高度+p 标签高度 = h2 标签高度）

HTML结构（不允许修改）

IPHONE XRIS THE FUCKINGBEST EVER MADEiPhone 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.

基础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（https://www.zhangxinxu.com/study/201810/a-css-ques.html?type=1）

效果如下截图：

表示宽度收缩到最小，如果是默认状态，宽度应该是最窄单词的宽度，由于设置了，因此，宽度就是最长的那一行字符宽度（如果不太理解，可以买本《CSS世界》，内有深入讲解），由于P标签设置了，因此，最终宽度就是大字号标题的最长的那一行的宽度，最终实现预期效果。如果对还不太了解，可以参见“理解CSS3 max/min-content及fit-content等width值”这篇文章。