資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究CSS 中帶有水平字母的垂直文字
在網頁上，您可能需要設定垂直文字，並且還需要使用水平字母。透過指定 text-orientation: upright 和 writing-mode: vertical-rl，我們可以使用水平 CSS 顯示垂直文字。
語法
CSS writing-mode 和 text-orientation 屬性的語法如下：
Selector {
writing-mode: /*value*/
text-orientation: /*value*/
}
建立帶有水平字母的垂直文字
以下示例說明如何建立帶有水平字母的垂直文字：
文字方向
要建立垂直文字，請將 text-orientation 設定為 upright：
text-orientation: upright;
書寫模式
書寫模式設定為 vertical-rl。透過此設定，文字行垂直排列，即從上到下垂直流動，從右到左水平流動。由於文字方向為 upright，因此字元不會旋轉，並且可以直立可見：
writing-mode: vertical-rl;
示例
讓我們看看這個例子：
<!DOCTYPE html>
<html>
<head>
<style>
h4 {
text-orientation: upright;
writing-mode: vertical-rl;
line-height: 3;
box-shadow: inset 0 0 3px khaki;
}
</style>
</head>
<body>
<h4>Cricket is love</h4>
</body>
</html>
使用 flex 建立相同大小的垂直文字
讓我們看看另一個示例，其中使用 display 屬性和值 flex 設定 flex。flex 1 設定為允許所有彈性專案具有相同的長度：
body {
display: flex;
flex: 1;
}
<p> 元素使用 text-orientation 和 writing-mode 屬性來建立帶有水平字母的垂直文字：
p {
text-orientation: upright;
writing-mode: vertical-rl;
}
示例
這是一個示例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
flex: 1;
}
p {
text-orientation: upright;
writing-mode: vertical-rl;
line-height: 3;
box-shadow: inset 0 0 13px orange;
}
</style>
</head>
<body>
<p>One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>
</body>
</html>
更新於： 2023-12-14
1K+ 閱讀量
廣告