一道 CSS 题目,大家进来练练手

[hoythan]

有一道 CSS 题目，给大家练练手，稍后公布答案。

题目要求:

1. P 标签的最大宽度不可以大于 H2 标签文字宽度的 10%
2. 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;
}

初始效果

期望效果

P 标签 100% 效果



P 标签 130% 效果



H2 文字改变效果 P 100% 效果 [GIF]

我实现的方法

        h2 {
            display: table;
        }

        p {
            display: table-caption;
            caption-side: bottom;
        }

附一个张鑫旭老师提供的方法

        h2 {
            width: min-content;
            white-space: nowrap;
        }

        p {
            white-space: normal;
        }        

佩服的五体投地。

[kY8mbXW833Lu28xn]

不会，公布答案吧

[InternetExplorer]

作为一个能解析 CSS 的浏览器，我觉得你要的期望效果不符合题目的第一个效果◡ ヽ(`Д´)ﾉ ┻━┻

[InternetExplorer]

（划掉）第一个效果（划掉）
第一个要求

[hoythan]

@InternetExplorer 是符合的，只是英文字母太长被截断换行了。改成 30%的话就能塞得下了

[lianyue]

h2 里面能放 p ？

[hoythan]

@lianyue 只要你想。

[zhangyu911013]

wordbreak?

[hoythan]

@zhangyu911013 试试看，CSS 奇淫巧技太多了，什么属性都可能写出这种效果

[yuoboo]

怎么理解第一个要求，有人科普一下吗😊

[hoythan]

@yuoboo

这是 P 标签设置 100% 的效果，和 H2 标签最长的一个字相等宽度。

大于 H2 10%的意思就是说 P 标签 110%宽度

[yimity]

h2 {
font-size: 52px;
font-weight: bold;
color: #000;
position: relative;
display: inline-table;
margin: 0;
padding: 0;
}
p {
font-size: 12px;
color: #333;
word-break: break-word;
width: 110%;
padding: 0;
margin: 0;
display: block;
position: absolute;
left: 0;
word-spacing: -2px;
}
根据不同字体，可能需要调整 word-spacing

[InternetExplorer]

@hoythan #10 按你的这个说法 应该叫：

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

或者：

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

[hoythan]

@yimity 用 abs 会失去 h2 高度。

[hoythan]

@yimity 大概意思就是你鼠标放在 h2 上获得到的是 h2 里面文字高度和 p 标签的高度。

[yimity]

@hoythan 你可以看看这里会不会失去。

[hoythan]

@yimity 会的