您现在的位置是：网站首页> 编程资料编程资料

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

2021-09-05 1099人已围观

简介 ruby-position能在样式上定制文字周围的注音位置,页面编码设置好以后可以用来制作各种语言之间的加注翻译效果,下面我们来看一下使用CSS3的ruby-position固定注音位置的用法示例:

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

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

实例代码

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

>
<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">新

上一篇：使用CSS的table-cell属性实现左图右文的排版方法详解CSS中使用table-cell法来达到居中效果CSS：Table-cell属性的妙用让div也能享受table定位的好处关于CSS中的display:table-cell使用技巧的几种应用

下一篇：CSS中的table-cell属性使用实例教程使用CSS的table-cell属性实现左图右文的排版方法详解table-cell完成左侧定宽，右侧定宽及左右定宽等布局的实现方法CSS中使用table-cell法来达到居中效果CSS：Table-cell属性的妙用让div也能享受table定位的好处实现div垂直居中的display:table-cell方法示例介绍display:table-cell实现兼容性的两栏自适应布局实现代码关于CSS中的display:table-cell使用技巧的几种应用

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网