当前位置：首页 > 行业动态 > 正文

html文字竖着

admin
行业动态
2025-05-02
4222

实现HTML文字竖排可使用CSS样式 writing-mode: vertical-rl; text-orientation: upright;，配合` 容器包裹文本，需注意中文字符方向需添加-webkit-`等浏览器

HTML文字竖排的实现方法

使用CSS `writing-mode`属性

通过CSS的writing-mode属性可以轻松实现文字竖排效果，该属性定义了文本的书写模式，支持vertical-lr（从左到右竖排）和vertical-rl（从右到左竖排）两种模式。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">竖排文字示例</title>
    <style>
        .vertical-text {
            writing-mode: vertical-lr; / 设置竖排模式 /
            text-orientation: upright; / 保持字符方向正常 /
            font-size: 24px;
            height: 300px; / 限制高度防止过长 /
            overflow: auto; / 超出部分出现滚动条 /
        }
    </style>
</head>
<body>
    <div class="vertical-text">
        这是一个竖排文字的示例，用于展示CSS的writing-mode属性效果，通过调整样式可以控制文字方向、大小和容器高度。
    </div>
</body>
</html>

使用表格布局实现竖排

通过将文字拆分为单个字符，并利用表格的行和列特性,可以实现更精细的竖排控制。

html文字竖着第1张

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">表格竖排示例</title>
    <style>
        .table-container {
            border-collapse: collapse; / 合并表格边框 /
            font-size: 20px;
        }
        .table-container td {
            padding: 5px; / 单元格间距 /
            border: 1px solid #ccc; / 添加边框 /
            text-align: center; / 文字居中对齐 /
        }
    </style>
</head>
<body>
    <table class="table-container">
        <tr>
            <td>这</td>
            <td>是</td>
            <td>一</td>
            <td>个</td>
            <td>表</td>
            <td>格</td>
            <td>竖</td>
            <td>排</td>
            <td>示</td>
            <td>例</td>
        </tr>
    </table>
</body>
</html>

使用JavaScript动态处理

通过JavaScript将文本拆分为单个字符，并用<div>元素包裹,配合CSS实现竖排。

示例代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">JS动态竖排示例</title>
    <style>
        .dynamic-vertical {
            display: flex; / 使用Flex布局 /
            flex-direction: column; / 垂直排列 /
            align-items: center; / 文字居中 /
            font-size: 22px;
        }
        .dynamic-vertical div {
            margin: 5px 0; / 字符间距 /
        }
    </style>
</head>
<body>
    <div id="vertical-container" class="dynamic-vertical"></div>
    <script>
        const text = "这是一个通过JavaScript动态生成的竖排文字示例";
        const container = document.getElementById("vertical-container");
        // 将每个字符包裹在div中并添加到容器
        text.split('').forEach(char => {
            const charDiv = document.createElement("div");
            charDiv.textContent = char;
            container.appendChild(charDiv);
        });
    </script>
</body>
</html>