数据结构
网络
关系数据库管理系统
操作系统
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+ 阅读量
广告