div+css文章段落怎麼豎排顯示？

可以自動換行的，怎麼做

&
&

&
• &這裡是文字標題& 本段文字將按照垂直從右到左的書寫方向進行流動。
  & &

• &這裡是文字標題& 本段文字將按照垂直從右到左的書寫方向進行流動。
& & &

  *{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骨架）

  &
&

  &
  • &課程簡介&>&>& 本課程把中國傳統作為一個整體加以觀照，探討傳統中國的社會、政治以及文化生活同中國傳統哲學之間的關係，從文化的觀念……【詳細內容】
    & &

  • &課程負責人&>&>& 李老師，博士，某著名師範大學老師，從事國學教育和培訓多年，經驗極為豐富……【詳細內容】
& & &
    預覽長這樣：

    

    2.3美化房子（CSS）

    * {
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;
}


    預覽長這樣：

    

    這樣就完成啦。（本人還在學習CSS，有些錯誤在所難免，望指教）

    ---

    半年前我有一個網站也需要做豎排 這個問題我專門研究過 樓上提到的那種Css方法 好像只支持IE 最後我使用了一個js插件 變成絕對定位的文字塊 解決。 但是這樣沒有做到文字流 僅僅是從視覺上達到了豎排文字的效果。

    ---

    推薦閱讀：