1

我正在更改 SlickGrid 标题的高度并使用以下 CSS 旋转标题中的文本：

.slick-column-name {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);

    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.slick-header-columns, .slick-header-column {
    height: 200px !important;
}

为了更好地理解，请看一下：

http://jsfiddle.net/2Nvc3/1/

标题中的旋转文本居中并被截断。如何更改对齐方式，使其从底部开始（文本应在 -90° 旋转之前左对齐）？

其中一列的宽度是故意不同的。

4

1 回答 1

2

链接到 jsFiddle我玩了一段时间。基本上问题是旋转的原点是你的文本/标题的中间。由于“Else else SOmeshing Else”明显长于其他列名，因此它在两侧都突出。无论哪种方式 - 将位置的原点更改为文本的开头都可以解决此问题。然后居中嗯... horizontally（在旋转之后）我们放置的文本40%- 至少在 Chrome 中看起来不错，但不确定为什么不是50%。为了使文本居中 um... vertically（在旋转之后），我们只需添加 的文本缩进-235px，由此处选择的高度决定以适合文本，即250px.

于 2013-05-04T00:01:07.720 回答