logo标签列表

网页上的竖排文字

htmlcsstext-rotation
4

首先声明，我知道这个问题已经被问了很多次，但是没有一个答案适用于我。

大多数解决方案都指导使用transform:rotate(270deg);，然而，这会影响宽度，因为块是以一种不考虑旋转的方式生成的，使块比所需的更宽。

我的目标是在表格中获得类似以下的东西:

Desired result

我一直在尝试使用各种不同的CSS属性，但都没有成功。这是一个基本的沙盒 我一直在使用它，展示了我遇到的一些问题。

4个回答
4

将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>

添加Fiddle中提供的CSS，您将会得到所需的结果。希望能对您有所帮助。

FIDDLE

2
JSFiddle似乎出了问题，所以我无法查看您的代码--但是也许您应该在rotate变换之外还包括transform-origin。这里有一个演示： http://jsbin.com/isinoh/2/edit
如果您需要支持旧浏览器，可以使用RaphaelJS (演示)。 - N Rohler
0
这里最难的部分是将竖排文字与表格格式相结合。可以参考如何在跨浏览器CSS中绘制竖排文字？。似乎您需要在每个标题单元格中添加两个额外的标记，因为您需要定位（以便将旋转的内容从单元格中取出，以便其未旋转的尺寸不会破坏表格格式），而且当定位时，表格单元格的表现不太好。
例如：
<!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>

由于字体渲染问题（当您不编写正常的水平文本时，提示无法帮助），在许多系统中旋转的文本绘制效果并不好看。

0

你可以使用canvas元素手动渲染文本。在这种情况下，你也需要手动调整元素的宽度和高度。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接