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

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

This topic created in 2818 days ago, the information mentioned may be changed or developed.

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

题目要求:

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

初始效果

期望效果

Supplement 1 · Sep 18, 2018

P 标签 100% 效果

P 标签 130% 效果

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

Supplement 2 · Sep 18, 2018

我实现的方法

        h2 {
            display: table;
        }

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

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

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

        p {
            white-space: normal;
        }

佩服的五体投地。

CSS

标签

font-size

not

16 replies • 2018-09-18 22:21:46 +08:00

kY8mbXW833Lu28xn

Sep 18, 2018 via Android

不会，公布答案吧

InternetExplorer

Sep 18, 2018

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

InternetExplorer

Sep 18, 2018

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

hoythan

Sep 18, 2018

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

lianyue

Sep 18, 2018

h2 里面能放 p ？

hoythan

Sep 18, 2018

@lianyue 只要你想。

zhangyu911013

Sep 18, 2018 via Android

wordbreak?

hoythan

Sep 18, 2018

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

yuoboo

Sep 18, 2018 via Android

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

hoythan

Sep 18, 2018

@yuoboo

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

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

yimity

Sep 18, 2018

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

Sep 18, 2018

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

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

或者：

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

hoythan

Sep 18, 2018 via iPhone

@yimity 用 abs 会失去 h2 高度。

hoythan

Sep 18, 2018 via iPhone

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

yimity

Sep 18, 2018

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

hoythan

Sep 18, 2018

@yimity 会的