Kendo UI Angular Grid - 只需要显示一行内容

Question

我正在为 Angular 使用 Kendo UI 网格，并且有一种情况，其中一个网格列包含大量文本数据，但我不希望文本换行。我希望所有行的高度相同。

我尝试将此添加到我的组件的 SCSS 文件中：

.k-grid {
  background-color: green;
 }
 
 .k-grid tbody tr {
  height: 40px;
 }
 
 .k-grid tbody tr td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 }

背景是绿色的（我把它放在那里是为了排除我的 SCSS 没有正确构建的任何问题）但其他样式似乎被忽略了。我查看了 Chrome 调试器中的元素，并且根本没有引用行内容的规则，这让我认为这些选择器不适用于 Angular 版本。有很多关于 jQuery 版本的文档（我是从那里得到这个的），但没有关于 Angular 控件的文档。

有谁知道我做错了什么或有任何想法如何使它工作？

谢谢， 詹姆斯

Answer 1

试试这个：

/deep/ .k-grid tbody tr {
    height: 40px;
}

/deep/ .k-grid tbody tr td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
 }

编辑：
有关更多信息，您可以在文档here 中阅读。