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

就让心静静地置于时光的一隅,用一片花香的暖,守候心灵的风景,正如世间每一种长久的缘都要悉心来呵护。经年后,那久久留存在心底的目光,是微细的心,是相知的暖。一梦许是无痕,一梦花又盛开。年复一年,碾过昔日的足迹,我的灵魂睡在那些温暖的文字里,与感恩和快乐相依,或喜或泣,皆是生活的一脉馨香。 "

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

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

实例代码

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-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. </head>
  12. <body>
  13. <p><rubyclass="sample1">新幹線<rt>しんかんせん</rt></ruby></p>
  14. <p><rubyclass="sample2">新干线<rt>xinganxian</rt></ruby></p>
  15. <p><rubyclass="sample3">高铁<rt>High-speedrail</rt></ruby></p>
  16. </body>
  17. </html>

实例图

到此这篇关于如何使用CSS3的ruby-position固定注音位置的用法示例就介绍到这了。当一个人先从自己的内心开始奋斗,他就是个有价值的人。更多相关如何使用CSS3的ruby-position固定注音位置的用法示例内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

CSS如何使用Flex和Grid布局如何实现3D骰子

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例