Question

我会说我的问题很琐碎，但是我在实现预期的行为方面遇到困难。

我正在使用Telerik MVC框架，目前，我的任务是构建Spreadsheet，其外观与给定的模板相同。但是，在模板中，页眉中的单元格旋转了90°（如果愿意，则旋转270度）（因为它们的数量很大）。看来，Telerik并没有实现通过设置一些属性或调用一些准备好的函数来旋转它的功能（至少我没有找到方法），因此我尝试使用CSS来实现。

我可以通过通用语法对其进行旋转（在Chrome中进行测试-因此，目前仅一行就足够了）

@IBOutlet var slider: UISlider!
//...
func startSlider() {
    slider.value = 0
    slider.maximumValue = 10

    Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) { [weak self] (timer) in
        print("Slider at: \(self?.slider.value)")
        guard self?.slider.isTracking == false else { return }
        self?.updateSlider(to: self!.slider.value + 0.1)
    }
}

private func updateSlider(to value: Float) {
    slider.value = value
}

现在我正面临这个问题。旋转后的文本不在单元格中（因此部分文本不可见），我无法找到如何移动它的方法。解决方法是，我可以将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>

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

1 个答案: