当前位置：主页 > 查看内容

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

发布时间：2021-09-28 00:00| 有 位朋友查看

简介：ruby-position 指定注意的位置时使用。设置或检索通过rt对象指定的注释文本或发音指南（参考ruby对象）的位置。 属性值 1.before注音文本会在基础文字上面表示。（默认值） 2.after注音文本会在基础文字下面表示。 3.right 注音文本会在基础文字右面表示。……

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

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

实例代码

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  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>xinganxian</rt></ruby></p>  
  17. <p><ruby class="sample3">高铁<rt>High-speed rail</rt></ruby></p>  
  18. </body>  
  19. </html>  

实例图
201675115045234.png (162×180)


原文链接：https://m.jb51.net/css/474615.html
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：CSS中的table-cell属性使用实例教程 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐