此 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用法及代碼示例
- CSS text-overflow用法及代碼示例
- CSS text-overflow屬性用法及代碼示例
- CSS text-decoration-skip-ink屬性用法及代碼示例
- CSS text-decoration-style用法及代碼示例
- CSS text-justify用法及代碼示例
- CSS text-decoration-color用法及代碼示例
- CSS text-align用法及代碼示例
- CSS text-transform屬性用法及代碼示例
- CSS text-shadow用法及代碼示例
- CSS text-indent用法及代碼示例
- CSS text-decoration用法及代碼示例
- CSS text-decoration-line用法及代碼示例
- CSS text-align-last用法及代碼示例
- CSS table-layout用法及代碼示例
- CSS translate()用法及代碼示例
- CSS transition-delay用法及代碼示例
- CSS translateY()用法及代碼示例
- CSS transition屬性用法及代碼示例
- CSS translate3d()用法及代碼示例
注:本文由純淨天空篩選整理自 CSS text-orientation property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。