编程 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 相关文章推荐

利用纯css3实现的文字亮光特效的代码演示

Nov 27 HTML / CSS

CSS3中Animation属性的使用详解

Aug 06 HTML / CSS

CSS3中设置3D变形的transform-style属性详解

May 23 HTML / CSS

css3 flex布局 justify-content:space-between 最后一行左对齐

Jan 02 HTML / CSS

用css3实现转换过渡和动画效果

Mar 13 HTML / CSS

css3实现小箭头各种图形效果

Jul 08 HTML / CSS

在html5的Canvas上绘制椭圆的几种方法总结

Jan 07 HTML / CSS

html5基础教程常用技巧整理

Aug 20 HTML / CSS

使用javascript和HTML5 Canvas画的四渐变色播放按钮效果

Apr 10 HTML / CSS

html2canvas把div保存图片高清图的方法示例

Mar 05 HTML / CSS

Html5之webcoekt播放JPEG图片流

Sep 22 HTML / CSS

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

Apr 14 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

PHP无法访问远程mysql的问题分析及解决

2013/05/16 PHP

PHP curl 获取响应的状态码的方法

2014/01/13 PHP

jquery获取及设置outerhtml的方法

2015/03/09 Javascript

仅一个form表单 js实现注册信息依次填写提交功能

2016/06/12 Javascript

详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用

2017/06/16 Javascript

详谈js对url进行编码和解码(三种方式的区别)

2017/08/16 Javascript

js中el表达式的使用和非空判断方法

2018/03/28 Javascript

在layui框架中select下拉框监听更改事件的例子

2019/09/20 Javascript

vue + axios get下载文件功能

2019/09/25 Javascript

vue 中的 render 函数作用详解

2020/02/28 Javascript

[02:24]DOTA2痛苦女王英雄基础教程

2013/11/26 DOTA

Python实现把数字转换成中文

2015/06/29 Python

Python如何快速实现分布式任务

2017/07/06 Python

Python面向对象class类属性及子类用法分析

2018/02/02 Python

自学python的建议和周期预算

2019/01/30 Python

Python把对应格式的csv文件转换成字典类型存储脚本的方法

2019/02/12 Python

pygame实现非图片按钮效果

2019/10/29 Python

Python:二维列表下标互换方式(矩阵转置)

2019/12/02 Python

关于pytorch中全连接神经网络搭建两种模式详解

2020/01/14 Python

利用Python优雅的登录校园网

2020/10/21 Python

使用CSS3的appearance属性改变任何元素的浏览器默认风格

2012/12/24 HTML / CSS

css3 图片圆形显示如何CSS将正方形图片显示为圆形图片布局

2014/10/10 HTML / CSS

完美解决IE8下不兼容rgba()的问题

2017/03/31 HTML / CSS

Expedia爱尔兰：酒店、机票、租车及廉价假期

2017/01/02 全球购物

李维斯牛仔裤英国官方网站：Levi’s英国

2019/10/10 全球购物

Python使用openpyxl复制整张sheet

2021/03/24 Python

白酒业务员岗位职责

2013/12/27 职场文书

人力资源部副职的竞聘演讲稿

2014/01/07 职场文书

物理系毕业生自荐书范文

2014/02/22 职场文书

高中军训感言200字

2014/02/23 职场文书

电气工程自动化求职信

2014/03/14 职场文书

公司合作意向书

2014/04/01 职场文书

党员个人党性分析材料

2014/12/18 职场文书

2014年小学教导处工作总结

2014/12/19 职场文书

画展观后感

2015/06/17 职场文书

2019年公司快递收发管理制度模板

2019/11/20 职场文书