Wrapping text in igxColumn

Hi,

I am using an igxGrid and I would like to make a cell wrapping text content.

The text has no space in it.

Here is my column declaration

<igx-column header=”Url” field=”url” width=”150px” [filterable]=”true” [resizable]=”true” >
<ng-template igxCell let-cell=”cell” >
<span>{{ cell.value }}</span>
</ng-template>
</igx-column>

How can i Do

Thanks

Hello,
Thank you for contacting Infragistics Support.

If you want to add custom style to the Igx Cell, according to the given cell template I recommend you to do it in the following way:

.igx-grid__td span { }

and add the whatever custom style you want. For example if you want the cell content not to overflow the cell borders you can add:

@import "~igniteui-angular/lib/core/styles/base/utilities/index";

.igx-grid__td span { @include ellipsis(); } in your style.scss file

or if you are using plain css in your style.css :

.igx-grid__td span { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

If you have any further questions or this is not the specific behavior that you want to achieve, please contact us and describe in more details the behavior that you expect to get.

Many thanks Desislava. That solves my problem adding .igx-grid_td spane in my style.css file

/* You can add global styles to this file, and also import other style files */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
.igx-grid__td span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}