div+css文章段落怎么竖排显示？_大段文字在div中竖向划动-优快云博客

本文介绍如何使用CSS的writing-mode属性实现文本的竖向排列，并提供了具体的代码示例。

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

显示效果

可以自动换行怎么做

html code

<div class="text">
<ul class="tb-rl">
                <li class="test">
                       <h3>这里是文字标题</h3>
                       本段文字将按照垂直从右到左的书写方向进行流动。
                  </li>
                  <li class="test">
                      <h3>这里是文字标题</h3>
                      本段文字将按照垂直从右到左的书写方向进行流动。
                 </li>
          </ul>
</div>

css code

*{padding:0; margin:0;}
ul{margin-top:20px;}
li{width:200px; height:300px; border-right:2px solid #f00; list-style: none}
li h3{line-height:30px; font-size:16px;}
.tb-rl{-webkit-writing-mode:vertical-rl;writing-mode:tb-rl;writing-mode:vertical-rl;}

1.在CSS中，哪个属性使得文本竖排显示？
「writing-mode」设置文本的书写方式，它的取值有： lr-tb （从左到右，从上到下）， tb-rl（从右到左，从上到下）等等。在这里，我们将使用tb-rl（从上到下，从右到左）。
考虑到浏览器兼容问题，我们更常用的是「-webkit-writing-mode」这个属性。它的取值有：horizontal-tb（从左到右，从上到下），vertical-rl（从上到下，从右到左），以及vertical-lr（从上到下，从左到右）。在这里，我们将使用vertical-rl。

2. 一个例子

2.1分析例图

如上图。 div>ul>li*2>h1.

2.2 html code

<div class="course">
       <ul class="intro">
<li class="tb-rl">
                       <h1>课程简介>></h1>
                           本课程把中国传统作为一个整体加以观照，探讨传统中国的社会、政治以及文化生
                           活同中国传统哲学之间的关系，从文化的观念……【详细内容】
                  </li>
   <li class="tb-rl">
                        <h1>课程负责人>></h1>
   李老师，博士，某著名师范大学老师，从事国学教育和培训多年，
                         经验极为丰富……【详细内容】
   </li>
        </ul>
</div>

2.3 css code

* { padding: 0; margin: 0; }
body { background-color: #180000; color: #ffffff; }
.intro {
    -webkit-writing-mode: vertical-rl;
     writing-mode: tb-rl;
     margin: auto;
     margin-top: 50px;
     width: 370px;
   height: 270px;
}
.tb-rl { list-style: none; margin-left: 50px; line-height: 25px; }
h1 { font-size: 20px; margin-left: 10px; padding-right: 5px; border-right: 2px solid #ffffff; height: 150px; }

效果

作者：曾能轩
链接：http://www.zhihu.com/question/37423363/answer/75647013
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。