Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Wrapping text in igxColumn


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>

How can i Do


No Data
  • 320
    Offline posted

    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.