平時我們常使文字橫排顯示，那麼如何用CSS實現文字豎排顯示呢？以下是程式碼例項。
2018年4月4日15:17
.time{ width: 16px; line-height: 16px; font-size: 16px; color: red; } 可以看到在瀏覽器裡如圖所示： 1 因為縮小了寬度，所以導致文字變為單行，但是數字和時間的地方卻依然是橫排顯示。然後通過搜尋查詢，發現一個CSS屬性是writing-mode。語法：
writing-mode：horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl 預設值：normal 適用於：除 <' display '> 屬性定義為table-row-group | table-column-group | table-row | table-column之外的所有元素 繼承性：有 動畫性：否 計算值：特定值
取值：
horizontal-tb：水平方向自上而下的書寫方式。即 left-right-top-bottom（類似IE私有值lr-tb） vertical-rl：垂直方向自右而左的書寫方式。即 top-bottom-right-left（類似IE私有值tb-rl） vertical-lr：垂直方向自左而右的書寫方式。即 top-bottom-left-right lr-tb：左-右，上-下。物件中的內容在水平方向上從左向右流入，後一行在前一行的下面。 所有的字形都是豎直向上的。這種佈局是羅馬語系使用的（IE） tb-rl：上-下，右-左。物件中的內容在垂直方向上從上向下流入，自右向左。後一豎行在前一豎行的左面。全形字元是豎直向上的，半形字元如拉丁字母或片假名順時針旋轉90度。這種佈局是東亞語系通常使用的（IE）
說明：
設定或檢索物件的內容塊固有的書寫方向。西方語言一般都是 lr-tb 的書寫方式，但是亞洲語言 lr-tb | tb-rl 的書寫方式都有。 作為IE的私有屬性之一，IE5.5率先實現了 writing-mode ，後期被w3c採納成標準屬性； 此屬性效果不能被累加使用。例如，父物件的此屬性值設為 tb-rl ，子物件再設定該屬性將不起作用，仍應用父物件的設定。 對應的指令碼特性為writingMode。
相容：
可相容IE6/IE7及常見瀏覽器。
那麼程式碼可編寫為：
.time{ writing-mode: vertical-lr; writing-mode: tb-rl; overflow: hidden; width: 16px; line-height: 16px; font-size: 16px; color: red; letter-spacing: 1px;//增加字元間距離,允許使用負值 } 則此時瀏覽器中顯示如圖所示： 2 可以看到文字數值顯示，且數字順時針旋轉90度。