在網頁上的垂直文本

讓我先說我知道這個問題已被問及很多，但沒有答案爲我工作。在網頁上的垂直文本

大多數解決方案指示使用transform:rotate(270deg);，然而，這食堂與寬度爲塊以這樣的方式在不考慮旋轉而產生，使得比所期望的塊寬。

我的目標是讓類似如下（表中的）：

Desired result

我一直在用各種不同的CSS屬性的玩弄，現在運氣。 Here is a basic sandbox我一直在努力，這表明我遇到的一些問題。

2012-12-29 steveo225

修改th這樣的：

<th> 
    <div class="container"> 
     <div class="head"> 
      <div class="vert">Column 1</div> 
     </div> 
    </div> 
</th> 
<th> 
    <div class="container"> 
     <div class="head"> 
      <div class="vert">Col 2</div> 
     </div> 
    </div> 
</th> 
<th> 
    <div class="container"> 
     <div class="head"> 
      <div class="vert">Column Two</div> 
     </div> 
    </div> 
</th>

，並添加了小提琴提供的CSS，你會得到期望的結果，我希望。

FIDDLE

來源

2012-12-30 12:44:30

您可以使用一個canvas元素，您可以在其中手動呈現文本。在這種情況下，您還必須手動調整元素的寬度和高度。

來源

2012-12-29 23:12:57 dionyziz

JSFiddle似乎已關閉，所以我看不到您的代碼 - 但也許除了rotate轉換之外，您還應該包括transform-origin。下面是我的意思的演示：http://jsbin.com/isinoh/2/edit

來源

2012-12-30 00:01:36

'旋轉transform'不上，雖然 – Houssni

如果需要舊的瀏覽器支持所有瀏覽器，你可以使用[RaphaelJS（http://raphaeljs.com/）（演示）（http://raphaeljs.com/text-rotation.html）。 –

這裏最困難的部分是將垂直文本與表格格式相結合。參看到How can I draw vertical text with CSS cross-browser?看來您可能需要在每個標題單元格中的兩個級別額外標記，因爲您需要定位（爲了將旋轉的內容從單元格中移出以便它們的未旋轉的尺寸不會混淆表格格式）和表格單元格定位時表現不好。

例子：

<!doctype html> 
<style> 
* { line-height: 1.3 } 
table { border-collapse: collapse } 
td, th 
{ 
    border: 1px solid black; 
    white-space: nowrap; 
} 
#title th 
{ 
    width: 15px; 
    height: 100px; 
    vertical-align: bottom; 
    font-weight: normal; 
} 
#title th > div { 
    position: relative; 
} 
#title th > div > div { 
    position: absolute; 
    bottom: 0; 
    -webkit-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
    -webkit-transform-origin: 0 100%; 
    -ms-transform-origin: 0 100%; 
    transform-origin: 0 100%; 
    left: 1.1em; 
} 
</style> 
<table> 
    <tr id="title"> 
     <th>&nbsp;</th> 
     <th><div><div>Column 1</div></div></th> 
     <th><div><div>Column 2</div></div></th> 
     <th><div><div>Column 3</div></div></th> 
    </tr> 
    <tr> 
     <td>Row 1</td> 
     <td>...</td> 
     <td>...</td> 
     <td>...</td> 
    </tr> 
    <tr> 
     <td>Row 2</td> 
     <td>...</td> 
     <td>...</td> 
     <td>...</td> 
    </tr> 
    <tr> 
     <td>Row 3</td> 
     <td>...</td> 
     <td>...</td> 
     <td>...</td> 
    </tr> 
</table>

結果將不會是在許多系統中很漂亮，因爲旋轉文本未按以及由於字體渲染問題（提示失敗，當你不寫正常水平文本幫助）。

來源

2012-12-30 09:17:25

在網頁上的垂直文本

回答

相關問題