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

Question

我会说我的问题很微不足道，但我无法达到预期的行为。

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

我能够通过通用语法旋转它(在 Chrome 中测试 - 所以目前，只有一行就足够了)

transform: rotate(270deg);

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

你知道如何让它旋转并定位在左侧(底部)吗？

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

DOJO Example

Answer 1

我建议使用文本方向和书写模式的 css 属性。引用这个link .

同时使用单元格的背景属性将为整个单元格应用颜色，而不仅仅是文本。

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