CSS text-orientation屬性用法及代碼示例

此 CSS 屬性指定內容行中字符的方向。它僅適用於內容的垂直模式。此屬性不影響水平書寫模式的元素。

它幫助我們控製使用垂直腳本的語言的顯示。此屬性有五個值：mixed、sideways、upright、sideways-right 和 use-glyph-orientation。它的默認值是混合的。此屬性的所有值僅適用於垂直模式。

此屬性取決於 writing-mode 屬性。僅當 writing-mode 未設置為 horizontal-tb 時才有效。

用法

text-orientation:mixed | upright | sideways | sideways-right | use-glyph-orientation | initial | inherit;

該屬性的值如下表所示。

屬性值

值	描述
mixed	默認值是將字符順時針旋轉 90o 度。它自然地設置了垂直腳本的字符。
upright	此值自然地設置水平腳本的字符(直立)，以及垂直腳本的字形。它使所有字符都被視為從左到右。
sideways	它將線順時針旋轉 90 度。該值會導致字符水平排列。該值在 Google Chrome 和除 Firefox 之外的其他主要瀏覽器中不起作用，即它僅在 Firefox 中有效。
sideways-right	它是出於兼容性目的而保留的。它是橫向值的別名。
use-glyph-orientation	不再使用該值。
initial	它將屬性設置為其默認值。
inherit	它從其父元素繼承屬性。

讓我們通過一些例子來理解這個屬性。

示例 1

在這個例子中，有兩個具有 CSS 屬性 writing-mode:vertical-rl 的段落元素；和 writing-mode:vertical-lr;在這裏，我們將應用 text-orientation 屬性的混合值和直立值。

在輸出中，我們可以看到這個 CSS 屬性的 upright 值的效果。

<!DOCTYPE html>
<html>
<head>
<style>
#lr, #rl {
border:2px solid black;
width:300px;
height:300px;
}
#lr {
writing-mode:vertical-lr;
text-orientation:mixed;
}

#rl {
writing-mode:vertical-rl;
text-orientation:upright;
}

</style>
</head>
<center>
<body>
<h1> Example of CSS text-orientation property </h1>
<h3> writing-mode:vertical-lr; and text-orientation:mixed; </h3>
<p id = "lr">
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
<h3> writing-mode:vertical-rl; and text-orientation:upright; </h3>
<p id = "rl">
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>

</center>
</body>
</html>

輸出

例2

這裏 writing-mode 設置為 vertical-rl，我們使用 text-orientation 屬性的橫向值。

此值僅適用於 Firefox。我們將在 Mozilla Firefox 瀏覽器中執行以下代碼。

<!DOCTYPE html>
<html>
<head>
<title> text-orientation property </title>
<style>
p{
border:2px solid black;
width:250px;
height:300px;
}

#rl {
writing-mode:vertical-rl;
text-orientation:sideways;
}

</style>
</head>
<body>
<h1> Example of CSS text-orientation property </h1>
<h3> writing-mode:vertical-rl; and text-orientation:sideways; </h3>
<p id = "rl">
Hi, Welcome to the javaTpoint.com. This site is developed so that students may learn computer science related technologies easily. The javaTpoint.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better.
</p>
</body>
</html>

輸出

相關用法

注：本文由純淨天空篩選整理自 CSS text-orientation property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。