利用CSS如何實現文字的豎排

本篇文章給大家帶來的內容是關於利用CSS如何實現文字的豎排，有壹定的參考價值，有需要的朋友可以參考壹下，希望對妳有所幫助。

樣式表的文字處理屬性中有兩個重要的屬性：writing-mode和text-align。讓我們先看看它們的用法：

1. writing-mode（設置對象書寫方向）

語法：writing-mode : lr-tb、tb-rl

參數：lr-tb：從左向右，從上往下 tb-rl：從上往下，從右向左

示例：

CSS Code復制內容到剪貼板

div { writing-mode: tb-rl; }2. text-align（設置對象中文本的對齊方式）

語法：text-align : left、right、center、justify

參數：left：左對齊right：右對齊center：居中justify：兩端對齊

示例：

CSS Code復制內容到剪貼板

div { text-align : center; }而通常普通的排版思路：對文字對象寬度設置只能排下壹個文字的寬度距離，讓文字壹行排不下兩個文字使其文字自動換行，就形成了豎立排版需求。

CSS Code復制內容到剪貼板

<!DOCTYPE html>

<html>

<head>

<style>

body{text-align:center}

.shuli{ margin:0 auto;width:20px;line-height:24px;border:1px solid #333}

</style>

</head>

<body>

<div class="shuli">我是豎列排版</div>

</body>

</html>