[css]如何实现 h5 中<ruby>xxx<rt>xx</rt></ruby>的效果
abelking · 2018-01-28 22:04:17 +08:00 · 1730 次点击这是一个创建于 2523 天前的主题，其中的信息可能已经有所发展或是发生改变。
结构是
<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 class="father">
<div>
这是前面
</div>
<div class="hanzi">
汉字
</div>
<div class="pinyin">
pinyin
</div>
<div>
这是后面
</div>
</div>
相等于： 这是前面<ruby>汉字<rt>pinyin</rt></ruby>这是后面 这样的效果。
本身做后端的，折腾了好久没成功。。。 虽然仅仅让 pinyin 在上可以实现，但是没法保证和 hanzi 是左对齐开始的。
 |
1
loginv2 2018-01-29 06:59:04 +08:00 via Android
做过类似的东西，不过当时是把字切开处理的，每个字符都是单独的块
|
 |
2
leefly 2018-01-29 09:44:09 +08:00
|
 |
3
Khlieb 2018-01-29 12:11:14 +08:00 via Android
|
Select Language