Заголовок таблицы с несколькими строками

Я использую таблицу сетка в моем проекте Угловой 7, и я не могу охватить заголовок текст ячейки в двух строках.

Теперь у меня есть заголовок вроде:

Preferred Option

И я бы хотел, чтобы это было

Preferred 
Option

Однако все, что я получаю, это либо только слово Предпочтительный, либо Предпочтительно ...

Вот примененный CSS:

<!--AG-HEADER-ROOT-->
element.style {
    height: 56px;
    min-height: 56px;
}

.ag-header-viewport {
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
    width: 0px;
    min-width: 0px;
    -ms-flex: 1;
    flex: 1;
}
div { //ag-header-container
    display: block;
}


.ag-theme-material .ag-header-cell, .ag-theme-material .ag-header-group-cell {
    line-height: 56px;
    padding-left: 24px;
    padding-right: 24px;
}

Здесь более иерархический вид:

ag-header {
    -ms-flex-direction: row;
        flex-direction: row;
        box-sizing: border-box;
        white-space: nowrap;
        width: 100%;
        display: -ms-flexbox;
        display: flex;
    .ag-header-row {    
        position: absolute;
    }
    .ag-header-cell {
      padding-left: 5px;
      padding-right: 0;
      box-sizing: border-box;
      display: inline-block;
      height: 100%;
      position: absolute;
      vertical-align: bottom;

      .ag-header-cell-text {
        padding-left: 0;
        padding-right: 0;
      }
    }

  }

Прямой подход, подробно описанный в других подобных поднятых вопросах, все равно не даст результата:

.ag-header-cell-label {
    text-overflow: clip;
    overflow: visible;
    white-space: normal;
} 

Как я могу получить двухстрочную ячейку .ag-header-cell?