CSS：垂直格式化文本

Question

CSS可以垂直格式化文本嗎？例如像這樣image顯示。該命令/解決方法應該在Safari中使用，因爲它在iPhone應用程序中使用。

非常感謝。 Doonot

Answer 1

有了CSS3，你可以使用變換：旋轉

 

div { 
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
transform: rotate(-90deg); 
position: absolute; 
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
}

但是...我帶過濾器的經驗是，他們用文字擰一點點視覺。足夠糟糕，它可以成爲一個交易斷路器。

Answer 2

是的Safari/Webkit和其他支持CSS文本旋轉的瀏覽器。

爲了執行轉換，元素必須設置爲display:block。在這種情況下，只需將聲明添加到要旋轉的跨度。 Opera在10.50中具有-o-transform支持

當涉及到Internet Explorer中的效果時，會有一個名爲BasicImage的過濾器，它提供了旋轉任何具有佈局的元素的能力。

#element-id{ 
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
-o-transform: rotate(-90deg); 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
display: block; 
position: absolute; 
left: 10px; 
top: 15px; 
} 

編號：TEXT ROTATION WITH CSS

Answer 3

轉換代碼，特別是在webkit中，變得糟糕透頂。在撰寫本文時，轉換矩陣應用於渲染引擎，但不應用於空間計算，因此Firefox和Chromium都嘗試在200x100的單元格中渲染100x200的區域。嘗試切換寬度/高度會導致在之前重新計算變換區域，因此應用了變換。

最簡單也是最可靠的方法是使用SVG生成文本的圖像。不幸的是，它是一個兩階段的過程：

<svg> 
    <text x="50" y="50" transform="rotate(0 0,0)">Category</text> 
</svg> 

呈現在瀏覽器中，並獲取文本標籤（在這種情況下，59x17）的尺寸，並將其插入到SVG。

<svg width='25px' height='60px'> 
    <text x="17" y="59" transform="rotate(270 17,59)">Category</text> 
</svg> 

隨着59 X知識+的內容，我稍微增加容器的大小，因爲大小似乎忽視掛字形（在y的尾部，例如）。 圍繞右下角旋轉270度會導致舊的右上角成爲新的左上角（即文字被轉換爲垂直，自下而上）。 文本也受到常規樣式表規則的約束，但如果這會更改文本大小，則必須重新計算維度。