Question

我正在更改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°旋转前左对齐）？

其中一列的宽度有意不同。

Answer 1

Link to jsFiddle我玩了一会儿。基本上问题是旋转的原点是文本/标题的中间。由于“Else else SOmeshing Else”比其他专栏名称长得多，因此它在两侧都很突出。无论哪种方式 - 将位置的原点更改为文本的开头都可以解决此问题。然后将... horizontally（旋转之后）文本放在40%的左边缘 - 在Chrome中看起来不错，但不确定为什么它不是{{1} }。为了使文本居中... 50%（在旋转之后），我们只需添加vertically的文本缩进，这取决于此处选择的高度以适合文本，{{1 }}。

在SlickGrid标题中垂直对齐垂直文本

1 个答案: