V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
hoythan
V2EX  ›  CSS

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

  •  
  •   hoythan · 2018-09-18 15:23:59 +08:00 · 3327 次点击
    这是一个创建于 2018 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    初始效果

    期望效果

    第 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;
            }        
    

    佩服的五体投地。

    16 条回复    2018-09-18 22:21:46 +08:00
    1024MB
        1
    1024MB  
       2018-09-18 15:28:20 +08:00 via Android
    不会,公布答案吧
    InternetExplorer
        2
    InternetExplorer  
       2018-09-18 15:51:55 +08:00
    作为一个能解析 CSS 的浏览器,我觉得你要的期望效果不符合题目的第一个效果◡ ヽ(`Д´)ノ ┻━┻
    InternetExplorer
        3
    InternetExplorer  
       2018-09-18 15:52:35 +08:00
    (划掉)第一个效果(划掉)
    第一个要求
    hoythan
        4
    hoythan  
    OP
       2018-09-18 15:53:36 +08:00
    @InternetExplorer 是符合的,只是英文字母太长被截断换行了。改成 30%的话就能塞得下了

    lianyue
        5
    lianyue  
       2018-09-18 16:34:11 +08:00
    h2 里面能放 p ?
    hoythan
        6
    hoythan  
    OP
       2018-09-18 16:41:43 +08:00
    @lianyue 只要你想。
    zhangyu911013
        7
    zhangyu911013  
       2018-09-18 17:01:36 +08:00 via Android
    wordbreak?
    hoythan
        8
    hoythan  
    OP
       2018-09-18 17:05:46 +08:00
    @zhangyu911013 试试看,CSS 奇淫巧技太多了,什么属性都可能写出这种效果
    yuoboo
        9
    yuoboo  
       2018-09-18 17:09:58 +08:00 via Android
    怎么理解第一个要求,有人科普一下吗😊
    hoythan
        10
    hoythan  
    OP
       2018-09-18 17:12:36 +08:00
    @yuoboo

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

    大于 H2 10%的意思就是说 P 标签 110%宽度
    yimity
        11
    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
        12
    InternetExplorer  
       2018-09-18 17:49:35 +08:00
    @hoythan #10 按你的这个说法 应该叫:

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

    或者:

    P 标签的最大宽度不可以比 H2 标签文字宽度的多 10%
    hoythan
        13
    hoythan  
    OP
       2018-09-18 17:55:52 +08:00 via iPhone
    @yimity 用 abs 会失去 h2 高度。
    hoythan
        14
    hoythan  
    OP
       2018-09-18 17:56:57 +08:00 via iPhone
    @yimity 大概意思就是你鼠标放在 h2 上获得到的是 h2 里面文字高度和 p 标签的高度。
    yimity
        15
    yimity  
       2018-09-18 20:45:20 +08:00
    @hoythan 你可以看看这里会不会失去。
    hoythan
        16
    hoythan  
    OP
       2018-09-18 22:21:46 +08:00
    @yimity 会的

    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1062 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 22:42 · PVG 06:42 · LAX 15:42 · JFK 18:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.