1

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

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

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

transform: rotate(270deg);

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

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

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

道场示例

4

1 回答 1

1

我建议使用文本方向和书写模式的 css 属性。请参阅此链接。

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

<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>
于 2019-03-08T11:54:42.457 回答