如何在HTML中实现CSS竖排字体效果？

在HTML中实现文字竖向排列可通过CSS的writing-mode属性设置，常用vertical-rl（从右向左）或vertical-lr（从左向右），结合text-orientation调整字符方向，搭配高度控制实现古籍式竖排效果，适用于中文、日文等东亚文字的传统排版需求。

如何实现HTML中的竖排字体效果

在网页设计中,竖排文字常见于东亚语言（如中文、日文）的传统排版场景，HTML与CSS配合可实现专业级竖排效果，以下为完整实现方案：

<section>
    <h3>一、核心CSS属性解析</h3>
    <div class="code-example">
        <pre><code>.vertical-text {
writing-mode: vertical-rl; /* 从右至左竖排 */
-webkit-writing-mode: vertical-rl; /* Safari兼容 */
text-orientation: upright; /* 字符直立 */
letter-spacing: 0.5em; /* 字间距调整 */

writing-mode：支持vertical-rl（右至左）和vertical-lr（左至右）
text-orientation：控制标点符号方向（mixed/upright）
text-combine-upright：用于横排数字/西文字符嵌入

<section>
    <h3>二、实际应用场景示例</h3>
    <div class="use-case">
        <h4>传统中文排版</h4>
        <div class="vertical-container" style="border: 1px solid #eee; padding: 15px">
            <p style="writing-mode: vertical-rl; margin:0">
                春眠不觉晓，处处闻啼鸟。<br>
                夜来风雨声，花落知多少。
            </p>
        </div>
    </div>
    <div class="use-case">
        <h4>日式菜单设计</h4>
        <div class="vertical-menu">
            <ul style="writing-mode: vertical-rl; list-style:none">
                <li>刺身盛合せ</li>
                <li>天麩羅定食</li>
                <li>懐石料理</li>
            </ul>
        </div>
    </div>
</section>
<section>
    <h3>三、浏览器兼容方案</h3>
    <table class="compatibility-table">
        <tr>
            <th>浏览器</th>
            <th>支持版本</th>
            <th>前缀要求</th>
        </tr>
        <tr>
            <td>Chrome</td>
            <td>48+</td>
            <td>否</td>
        </tr>
        <tr>
            <td>Safari</td>
            <td>10.1+</td>
            <td>-webkit-</td>
        </tr>
        <tr>
            <td>Firefox</td>
            <td>41+</td>
            <td>否</td>
        </tr>
    </table>
</section>
<section>
    <h3>四、排版优化建议</h3>
    <ol>
        <li>使用<code>&lt;ruby&gt;</code>标签处理注音文字
            <pre><code>&lt;ruby&gt;漢&lt;rt&gt;かん&lt;/rt&gt;字&lt;rt&gt;じ&lt;/rt&gt;&lt;/ruby&gt;</code></pre>
        </li>
        <li>配合<code>text-indent</code>调整段落缩进</li>
        <li>移动端适配需增加视口控制：
            <pre><code>@media (max-width: 768px) {
.vertical-text { font-size: 1.2em }

<section class="notice">
    <h3>注意事项</h3>
    <div class="warning">
        <p>️ 避免混排横竖文本导致阅读障碍</p>
        <p>️ 旧版IE需使用<code>-ms-writing-mode</code>属性</p>
        <p>️ 西文字符建议设置<code>text-orientation: upright</code></p>
    </div>
</section>
<div class="references">
    <h3>引用来源</h3>
    <ol>
        <li>MDN Web Docs: Writing Modes规范</li>
        <li>W3C CSS Writing Modes Level 4标准</li>
        <li>中文排版需求（CLReq）技术文档</li>
    </ol>
</div>