cari

Rumah  >  Artikel  >  hujung hadapan web  >  使用CSS3的ruby-position固定注音位置的用法示例介绍

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

高洛峰
高洛峰asal
2017-03-08 13:20:491727semak imbas

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

ruby-position 指定注意的位置时使用。eeac9c7796b5ca074777fae472337828

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

实例代码

<!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固定注音位置的用法示例介绍

Atas ialah kandungan terperinci 使用CSS3的ruby-position固定注音位置的用法示例介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：CSS中的table-cell属性使用实例Artikel seterusnya：详解CSS中单位px与em的区别

Artikel berkaitan

Lihat lagi