首页 > 网页制作 > CSS

使用CSS3的ruby-position固定注音位置的用法示例

admin CSS 2022-02-06 16:00:59 CSS3   注音   ruby-position"

ruby-position 指定注意的位置时使用。<设置或检索通过rt对象指定的注释文本或发音指南(参考ruby对象)的位置。>

属性值
1.before 注音文本会在基础文字上面表示。(默认值)
2.after 注音文本会在基础文字下面表示。
3.right 注音文本会在基础文字右面表示。

实例代码

XML/HTML Code复制内容到剪贴板
  1. >  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title> ruby-position title>  
  6. <style>  
  7. ruby.sample1 {ruby-position:before;}   
  8. ruby.sample2 {ruby-position:after;}   
  9. ruby.sample3 {ruby-position:right;}    
  10. style>  
  11.     
  12. head>  
  13.     
  14. <body>  
  15. <p><ruby class="sample1">新幹線<rt>しんかんせんrt>ruby>p>  
  16. <p><ruby class="sample2">新干线<rt>xinganxianrt>ruby>p>  
  17. <p><ruby class="sample3">高铁<rt>High-speed railrt>ruby>p>  
  18. body>  
  19. html>  

实例图
201675115045234.png (162×180)

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/CSS/77721.html

留言与评论(共有 0 条评论)
   
验证码:

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持