通過CSS顯示垂直文本

原文連結: CSS Vertical Text
原文日期: 2014年03月18日

翻譯日期: 2014年3月22日

翻譯人員: 鐵錨 樣本地址:  http://davidwalsh.name/demo/css-vertical-text.php

我們所建立的HTML元素基本上都認為是水平的架構。 我們更加註意寬度而不是高度,特別是當它涉及到文本時。 然而,有時候我們確實想以垂直方式顯示文本元素。 在以前那個腦癱的 Internet Explorers 時代,這完全是一場必敗之仗。 然而現在實現垂直文本就相當於輕輕地吹一口氣。 下面示範如何做到這一點!

The CSS
現在使用 CSS transforms 實現垂直文本是很容易的:

/* 您可能需要添加瀏覽器首碼,參考:  http://davidwalsh.name/vendor-prefixes*/.vertical-text {transform: rotate(90deg);transform-origin: left top 0;}

效果截圖如下:

根據你想以哪個方向顯示垂直文本, 旋轉角度會有所不同,但它的旋轉值將使文本垂直。 這是一個有用的提示:

.vertical-text {float: left;}

浮動元素本質上類似於自動寬度(auto width)!
CSS transforms 效率很高, 其能實現的功能比簡單地將文本垂直要強大很多,但通過上面的代碼,功能就實現了, 進步不也是很大嗎?