CSS实现竖向排列的文字

杰克AI
327 阅读1分钟

方法1：使用 writing-mode

writing-mode 是一种直接的方法，特别适用于竖排文本（如中文）。

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

方法2：使用 transform 旋转文本

如果只是想简单地将文本旋转90度，也可以使用 transform 属性。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>竖向排列文字</title>
    <style>
        .vertical-text {
            transform: rotate(90deg);
            transform-origin: left top;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="vertical-text">
        这是竖向排列的文字。
    </div>
</body>
</html>

方法3：使用 line-height 和 display: inline-block

这种方法适用于将每个字符竖向排列。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>竖向排列文字</title>
    <style>
        .vertical-text {
            display: inline-block;
            line-height: 1.5em;
        }
        .vertical-text span {
            display: block;
        }
    </style>
</head>
<body>
    <div class="vertical-text">
        <span>这</span>
        <span>是</span>
        <span>竖</span>
        <span>向</span>
        <span>排</span>
        <span>列</span>
        <span>的</span>
        <span>文</span>
        <span>字</span>
        <span>。</span>
    </div>
</body>
</html>

以上三种方法可以根据具体需求选择使用。其中， writing-mode 是最直接和推荐的方法，特别适用于中文竖排文本。而 transform 和 line-height 的方法则更适合一些特殊情况下的竖排效果。

avatar
文章
阅读
粉丝