Kendo MVC电子表格 - 将单元格文本旋转90°

Question

我会说我的问题非常微不足道，但我遇到了预期行为的问题。

我正在使用Telerik MVC框架，目前，我的任务是构建Spreadsheet，它看起来与给定的模板相同。但是，在模板中，标题中的单元格旋转90°（如果您愿意，则为270）（因为它们的数量巨大）。看来，Telerik没有通过设置一些属性或调用一些准备好的函数来实现旋转它的功能（至少我找不到方法）所以我试图用css来做。

我可以通过常用语法旋转它（在Chrome中测试 - 所以目前只有一行就够了）

transform: rotate(270deg);

现在我正面临着这个问题。旋转的文本将离开单元格（因此部分文本不可见），我无法找到如何移动它的方法。作为解决方法，我可以将verticalAlign设置为居中，但我希望文本对齐到左边（旋转后左边，因此到单元格的底部）。由于带有文本的div是相对定位的，我尝试使用最高值，但它不完全是我想要的。

你知道如何让它旋转并定位在左边（底部）吗？

这是dojo示例： - 单元格A1位于中心位置，B1位于左侧/底部，文本位于单元格外部。

DOJO Example

Answer 1

我建议使用面向文本和写作模式的css属性。请参阅此link。

同样使用单元格的background属性将应用整个单元格的颜色，而不仅仅是文本。

<style>
  .k-spreadsheet .k-spreadsheet-cell > .k-vertical-align-bottom {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: grey;
}

  .k-spreadsheet .k-spreadsheet-cell > .k-vertical-align-center {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: grey;
}
  </style>
    <div id="spreadsheet"></div>
    <script type="text/javascript" charset="utf-8">
        $("#spreadsheet").kendoSpreadsheet();
        var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
        var sheet = spreadsheet.activeSheet();
        sheet.rowHeight(0, 75);
        sheet.range("A1")
             .value("Lorem ipsum")
             .verticalAlign("center")
             .background("rgb(167,214,255)");
        sheet.range("B1")
             .value("Dolet semper")
             .verticalAlign("bottom")
             .background("yellow");;
    </script>