使用CSS变换旋转表格标题文本 [英] Rotating table header text with CSS transforms

问题描述

这看起来像应该是可能与以下：

This looks like it should be possible with the following:

.verticalText 
{           
    /* IE-only DX filter */
    writing-mode: tb-rl;
    filter: flipv fliph;

    /* Safari/Chrome function */
    -webkit-transform: rotate(270deg);

    /* works in latest FX builds */
    -moz-transform: rotate(270deg);
}

这适用于IE。

Safari，Chrome和FX中的奇怪方式错误 - 单元格的大小是在文本旋转之前计算的。

It goes wrong in a bizarre way in Safari, Chrome and FX - the cell's size is calculated before the text is rotated!

http://jsfiddle.net/HSKws/

我使用动态图片作为解决方法，尽管也有问题。我很高兴作为一个后退，但似乎应该有一种方法来使这个CSS工作 - 几乎在那里。

I'm using dynamic images as a workaround, although that also has its problems. I'm happy with that as a fall-back, but it seems like there should be a way to make this CSS work - it's almost there.

任何人都知道一种方式在转换应用后，使单元格适合内容？

Anyone know a way to make the cells fit the content after the transform has been applied?

推荐答案

'transform'改变整个元素的方向声明它，而不是它里面的文本内容。它更像是IE的'matrix'属性比'写入模式'。

‘transform’ alters the orientation of the entire element you declare it on, not the text content inside it. It's more like IE's ‘matrix’ property than ‘writing-mode’.

重要的是，转换元素不会改变其内容大小的计算方式（或者其父级的布局如何受到该大小的影响）。 CSS的垂直和水平尺寸算法是不同的和困难的，以获得正确的;没有真正一致的方式，他们可以随意旋转内容。所以transform就像使用position：relative：它改变了内容呈现的位置，但不会影响布局大小。

Crucially, transforming an element doesn't change how its content size is calculated (or how its parent's layout is affected by that size). CSS's algorithms for vertical and horizontal sizing are different and difficult enough to get right to being with; there's no real consistent way they could accomodate content with arbitrary rotation. So ‘transform’ is like using ‘position: relative’: it changes where the content is rendered, but not anything to do with layout size.

在表格中包含一个，您需要明确设置单元格的height以适应预期的旋转宽度。如果你事先不知道你可能会使用JavaScript来破解它。

So if you want to include one in a table you'll need to set the cell's ‘height’ explicitly to accomodate the expected rotated ‘width’. If you don't know that in advance you could potentially hack it up with JavaScript, perhaps.

FWIW：对于Fx3.1b3，span也像其他。但是在Windows上，它的水平唯一的反锯齿（ClearType）渲染看起来不是很好...一个良好的渲染图像可以出来更好。

FWIW: for me on Fx3.1b3 the span is also rotated like the others. However on Windows with its horizontal-only anti-aliasing (ClearType) the rendering doesn't look great... a well-rendered image could come out considerably better.

这篇关于使用CSS变换旋转表格标题文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！