Angular Kendo-grid-column не разрывает линию внутри

Question

Хотелось бы, чтобы отображалась строка внутри сетки

Тестовая строка 1 Тестовая строка 2 Тестовая линия 3

Вместо тестовой строки 1 Тестовая линия 2 Тестовая линия 3

То, что я пытался сделать, - это создать трубу для захвата пробелов между словами и разделения их на новую строку. На данный момент интерфейс рендеринга этой тестовой линии 1 Тестовая линия 2 Тестовая линия 3.

<kendo-grid-column field="text" title="Text">
                <ng-template kendoGridCellTemplate let-dataItem>
                    <span> {{ dataItem.text | replaceLineBreaks }} </span>

                </ng-template>
            </kendo-grid-column>

Нестандартная труба

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'replaceLineBreaks'})
export class ReplaceLineBreaks implements PipeTransform {
  transform(str: string): any {
  return  str.replace(/\n/g, '<br/>');
  }
}