css竖排文字

CSS竖排文字基础概念

CSS竖排文字是指通过CSS样式将原本水平排列的文字改为垂直排列。这种排版方式在某些设计场景中非常有用，比如传统的中文书籍排版、艺术字设计等。

类型

单行竖排：将一行文字垂直排列。
多行竖排：将多行文字垂直排列，通常需要考虑行间距和对齐方式。

应用场景

书籍排版：特别是传统的中文书籍，竖排文字是其主要的排版方式。
艺术字设计：在广告、海报等设计中，竖排文字可以用来突出重点。
网页设计：在一些特殊的网页设计中，竖排文字可以用来增加页面的趣味性和设计感。

实现方法

使用CSS属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS竖排文字</title>
    <style>
        .vertical-text {
            writing-mode: vertical-rl; /* 竖排文字 */
            text-orientation: upright; /* 文字方向 */
        }
    </style>
</head>
<body>
    <div class="vertical-text">
        这是一段竖排文字
    </div>
</body>
</html>

使用JavaScript辅助

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS竖排文字</title>
    <style>
        .vertical-text {
            display: inline-block;
            transform: rotate(90deg); /* 旋转90度 */
        }
    </style>
</head>
<body>
    <div class="vertical-text">
        这是一段竖排文字
    </div>
</body>
</html>