V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
abelking
V2EX  ›  问与答

[css]如何实现 h5 中<ruby>xxx<rt>xx</rt></ruby>的效果

  •  
  •   abelking · 2018-01-28 22:04:17 +08:00 · 1705 次点击
    这是一个创建于 2476 天前的主题,其中的信息可能已经有所发展或是发生改变。
    结构是
    <div class="father">
    <div>
    这是前面
    </div>
    <div class="hanzi">
    汉字
    </div>
    <div class="pinyin">
    pinyin
    </div>
    <div>
    这是后面
    </div>
    </div>

    相等于: 这是前面<ruby>汉字<rt>pinyin</rt></ruby>这是后面 这样的效果。
    本身做后端的,折腾了好久没成功。。。 虽然仅仅让 pinyin 在上可以实现,但是没法保证和 hanzi 是左对齐开始的。
    6 条回复    2018-01-29 18:54:34 +08:00
    loginv2
        1
    loginv2  
       2018-01-29 06:59:04 +08:00 via Android
    做过类似的东西,不过当时是把字切开处理的,每个字符都是单独的块
    leefly
        2
    leefly  
       2018-01-29 09:44:09 +08:00
    abelking
        4
    abelking  
    OP
       2018-01-29 13:34:25 +08:00
    @leefly 拼音部分要在汉字的上面,同时汉字部分和前后内容保持在一行。其实就是想通过 css 重现<ruby>的功能。
    leefly
        5
    leefly  
       2018-01-29 15:18:54 +08:00
    @abelking 那 flex 里面就只放需要的部分,`拼音部分要在汉字的上面` 这个的话可以通过 `order`来控制顺序
    abelking
        6
    abelking  
    OP
       2018-01-29 18:54:34 +08:00
    @leefly 谢谢大神 开拓了思路 我再捣鼓捣鼓
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1118 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 18:52 · PVG 02:52 · LAX 10:52 · JFK 13:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.