编程 HTML / CSS

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

Posted in HTML / CSS onJuly 05, 2016

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

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

实例代码

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> ruby-position </title>
<style>
ruby.sample1 {ruby-position:before;}
ruby.sample2 {ruby-position:after;}
ruby.sample3 {ruby-position:right;}
</style>
</head>
<body>
<p><ruby class="sample1">新?志?<rt>しんかんせん</rt></ruby></p>
<p><ruby class="sample2">新干线<rt>xinganxian</rt></ruby></p>
<p><ruby class="sample3">高铁<rt>High-speed rail</rt></ruby></p>
</body>
</html>

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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

收集的7个CSS3代码生成工具

Apr 17 HTML / CSS

CSS3基础(RGBa、text-shadow、box-shadow、border-radius)

Nov 13 HTML / CSS

CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)

Jun 06 HTML / CSS

css3 transform属性详解

Sep 30 HTML / CSS

前端隐藏出边界内容的实现方法

Apr 14 HTML / CSS

css3新单位vw、vh的使用教程

Mar 23 HTML / CSS

html5指南-6.如何创建离线web应用程序实现离线访问

Jan 07 HTML / CSS

详解HTML5中的拖放事件（Drag 和 drop）

Nov 14 HTML / CSS

使用canvas生成含有微信头像的邀请海报没有微信头像问题

Oct 29 HTML / CSS

吃透移动端 Html5 响应式布局

Dec 16 HTML / CSS

HTML页面滚动时部分内容位置固定不滚动的实现

Apr 14 HTML / CSS

基于CSS制作创意端午节专属加载特效

Jun 01 HTML / CSS

CSS3中Transition动画属性用法详解

Jul 04 #HTML / CSS

CSS3中Animation动画属性用法详解

Jul 04 #HTML / CSS

CSS3圆角边框和边界图片效果实例

Jul 01 #HTML / CSS

CSS3制作酷炫的三维相册效果

Jul 01 #HTML / CSS

CSS3的column-fill属性对齐列内容高度的用法详解

Jul 01 #HTML / CSS

使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题

Jun 28 #HTML / CSS

老生常谈CSS中的长度单位

Jun 27 #HTML / CSS

You might like

咖啡因含量是由谁决定的？低因咖啡怎么来？低因咖啡适合什么人喝

2021/03/06 新手入门

apache+php+mysql安装配置方法小结

2010/08/01 PHP

php导入excel文件到mysql数据库的方法

2015/01/14 PHP

迪菲－赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版

2015/05/12 PHP

PHP实现伪静态方法汇总

2016/01/13 PHP

jQuery 使用手册(三)

2009/09/23 Javascript

innerHTML 和 getElementsByName 在IE下面的bug 的解决

2010/04/09 Javascript

验证javascript中Object和Function的关系的三段简单代码

2010/06/27 Javascript

浏览器常用高宽的jquery插件

2011/02/24 Javascript

jquery插件validation实现验证身份证号等

2015/06/04 Javascript

使用Script元素发送JSONP请求的方法

2016/06/12 Javascript

JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解

2016/11/29 Javascript

使用ionic切换页面卡顿的解决方法

2016/12/16 Javascript

boostrapTable的refresh和refreshOptions区别浅析

2017/01/22 Javascript

jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】

2017/04/20 jQuery

JavaScript实现获取用户单击body中所有A标签内容的方法

2017/06/05 Javascript

详解React中的组件通信问题

2017/07/31 Javascript

为什么我们要做三份 Webpack 配置文件

2017/09/18 Javascript

集合Bootstrap自定义confirm提示效果

2017/09/19 Javascript

详解es6超好用的语法糖Decorator

2018/08/01 Javascript

JS实现移动端点击按钮复制文本内容

2019/07/28 Javascript

bootstrap实现tab选项卡切换

2020/08/09 Javascript

[12:51]71泪洒现场！是DOTA2让经典重现

2014/03/24 DOTA

Python常见文件操作的函数示例代码

2011/11/15 Python

Python选择网卡发包及接收数据包

2019/04/04 Python

解决flask接口返回的内容中文乱码的问题

2020/04/03 Python

中外合拍动画首获奥斯卡提名，“上海出品”《飞奔去月球》能否拿下最终大奖？

2021/03/16 国漫

HTML5引入的新数组TypedArray介绍

2012/12/24 HTML / CSS

HTML5 source标签：媒介元素定义媒介资源

2018/01/29 HTML / CSS

网络安全方面的面试题

2015/11/04 面试题

怎样在 Applet 中建立自己的菜单(MenuBar/Menu)？

2012/06/20 面试题

宿舍打麻将检讨书

2014/01/24 职场文书

小学生读书活动总结

2014/06/30 职场文书

社区服务活动小结

2014/07/08 职场文书

以下牛机，你有几个

2022/04/05 无线电