angular 6 ngx-treeview custom styling

Question

I am using ngx-treeview component in my angular 6 project. My tree-view items are very lengthy. So, I'm trying to apply text-overflow:ellipsis in the ./treeview-container .row-item. snippet goes like this

  :host /deep/ .treeview-container .row-item {
    margin-bottom: .3rem;
    flex-wrap: nowrap;
    width:100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

width is set to 100px and my text is truncated but the ellipsis is not applied. Could you support me in applying custom css? Also I need to display full text on hovering. Does ":hover" works on treeview-item?

PS: I tried the same for ./treeview-item also but didn't work.