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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 2263 天前的主题，其中的信息可能已经有所发展或是发生改变。

有一道 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;
}

初始效果

期望效果

第 1 条附言 · 2018-09-18 17:17:46 +08:00

P 标签 100% 效果

P 标签 130% 效果

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

第 2 条附言 · 2018-09-18 22:23:17 +08:00

我实现的方法

        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 条回复 • 2018-09-18 22:21:46 +08:00

1024MB

2018-09-18 15:28:20 +08:00 via Android

不会，公布答案吧

InternetExplorer

2018-09-18 15:51:55 +08:00

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

InternetExplorer

2018-09-18 15:52:35 +08:00

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

hoythan

2018-09-18 15:53:36 +08:00

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

lianyue

2018-09-18 16:34:11 +08:00

h2 里面能放 p ？

hoythan

2018-09-18 16:41:43 +08:00

@lianyue 只要你想。

zhangyu911013

2018-09-18 17:01:36 +08:00 via Android

wordbreak?

hoythan

2018-09-18 17:05:46 +08:00

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

yuoboo

2018-09-18 17:09:58 +08:00 via Android

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

hoythan

2018-09-18 17:12:36 +08:00

@yuoboo

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

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

yimity

2018-09-18 17:48:17 +08:00

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

2018-09-18 17:49:35 +08:00

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

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

或者：

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

hoythan

2018-09-18 17:55:52 +08:00 via iPhone

@yimity 用 abs 会失去 h2 高度。

hoythan

2018-09-18 17:56:57 +08:00 via iPhone

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

yimity

2018-09-18 20:45:20 +08:00

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

hoythan

2018-09-18 22:21:46 +08:00

@yimity 会的