首页
注册
登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请
登录
V2EX 提问指南
广告
V2EX
›
问与答
[css]如何实现 h5 中<ruby>xxx<rt>xx</rt></ruby>的效果
abelking
·
2018-01-28 22:04:17 +08:00
· 1687 次点击
这是一个创建于 2441 天前的主题,其中的信息可能已经有所发展或是发生改变。
结构是
<div class="father">
<div>
这是前面
</div>
<div class="hanzi">
汉字
</div>
<div class="pinyin">
pinyin
</div>
<div>
这是后面
</div>
</div>
相等于: 这是前面<ruby>汉字<rt>pinyin</rt></ruby>这是后面 这样的效果。
本身做后端的,折腾了好久没成功。。。 虽然仅仅让 pinyin 在上可以实现,但是没法保证和 hanzi 是左对齐开始的。
div
Pinyin
Ruby
class
6 条回复
•
2018-01-29 18:54:34 +08:00
1
loginv2
2018-01-29 06:59:04 +08:00 via Android
做过类似的东西,不过当时是把字切开处理的,每个字符都是单独的块
2
leefly
2018-01-29 09:44:09 +08:00
这样吗
http://jsbin.com/carukavigo/edit?html,css,output
3
Khlieb
2018-01-29 12:11:14 +08:00 via Android
http://web.archive.org/web/20070228150240/http://web.nickshanks.com/stylesheets/ruby.css
4
abelking
OP
2018-01-29 13:34:25 +08:00
@
leefly
拼音部分要在汉字的上面,同时汉字部分和前后内容保持在一行。其实就是想通过 css 重现<ruby>的功能。
5
leefly
2018-01-29 15:18:54 +08:00
@
abelking
那 flex 里面就只放需要的部分,`拼音部分要在汉字的上面` 这个的话可以通过 `order`来控制顺序
6
abelking
OP
2018-01-29 18:54:34 +08:00
@
leefly
谢谢大神 开拓了思路 我再捣鼓捣鼓
关于
·
帮助文档
·
博客
·
API
·
FAQ
·
实用小工具
·
1961 人在线
最高记录 6679
·
Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 29ms ·
UTC 03:20
·
PVG 11:20
·
LAX 20:20
·
JFK 23:20
Developed with
CodeLauncher
♥ Do have faith in what you're doing.