CSS怎樣讓文字豎直
在網頁設計中，有時需要將文字排列豎直顯示，如中文的縱向排列，或者英文字母豎著排的效果。那么使用CSS該怎樣實現呢？下面我們來介紹幾種實現方法。
1、使用writing-mode屬性
Writing-mode屬性定義了一個元素如何在文檔中顯示，通過設置writing-mode為vertical-rl（從上到下，從右到左）或vertical-lr（從上到下，從左到右）可以實現豎直排列。需要注意的是，writing-mode屬性在IE8和之前的版本不被支持。
示例代碼：

p{
writing-mode: vertical-rl;
text-orientation: upright;
text-align: right;
}

2、使用transform屬性
transform屬性定義了一個元素在二維或三維轉換中的位置，通過設置rotate(-90deg)可以將文本旋轉到垂直方向。需要注意的是，該方式對IE8和之前的版本支持不完全。
示例代碼：

p{
transform: rotate(-90deg);
transform-origin: left top 0;
white-space: nowrap;
display: inline-block;
}

3、使用flexbox布局
使用flexbox布局可以讓文本豎直排列并且自適應高度。實現方式是將文本放置在一個display: flex的容器中，并設置flex-direction為column。需要注意的是，該方式不被IE9和更早版本支持。
示例代碼：

.container{
display: -webkit-flex;
display: flex;
flex-direction: column;
}
p{
writing-mode: horizontal-tb;
-webkit-writing-mode: vertical-rl;
white-space: nowrap;
}

以上就是三種實現文本豎直排列的方法，使用時可以根據瀏覽器兼容性和實現效果選擇適合的方式。