您的位置：首页 > Web前端 > CSS

div+css文章段落怎么竖排显示？

2016-07-13 13:42 513 查看

显示效果

可以自动换行怎么做

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

来源：知乎

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航