在网页上的垂直文本

让我先说我知道这个问题已被问及很多，但没有答案为我工作。在网页上的垂直文本

大多数解决方案指示使用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

在网页上的垂直文本

回答

相关问题