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

Question

I am using the Kendo UI grid for Angular and have a scenario where one of the grid columns has a lot of text data, but I don't want the text to wrap. I want all the rows the same height.

I tried adding this to the SCSS file for my component:

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

The background is green (I put that there to rule out any issues with my SCSS not being built correctly) but the other styles seem to be getting ignored. I looked at the elements in Chrome debugger, and the rules for the row stuff aren't being referenced at all, which makes me think these selectors don't work for the Angular version. There's plenty of documentation for the jQuery version (which is where I got this from) but nothing for the Angular control.

Does anyone know what I'm doing wrong or have any ideas how to make this work?

Thanks, James

Answer 1

Try this:

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

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

Edit:
For more info, you can read about it in the documentation here .