实现文字垂直显示

熙熙攘攘Re

于 2019-08-12 18:31:49 发布

阅读量1.3k

点赞数

文章标签： writing-mode:horizontal-tb 实现文字的垂直显示

本文链接：https://blog.csdn.net/Miss_liangrm/article/details/99320880

版权

本文介绍了如何通过CSS属性`writing-mode: horizontal-tb;`来实现文字的垂直显示，包括在页面上的实际效果展示及核心代码介绍。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现页面上文字的垂直显示：

效果图：

核心：writing-mode : horizontal-tb;

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title></title>
    <style>
        .txt1{
            width: 20px;
            /* 竖直显示属性 */
            writing-mode:horizontal-tb; 
            background: pink;