css - La nueva línea ''\n'' no funciona en Typescript

Estoy creando un elemento de lista en un componente de TypeScript que se mostrará en la interfaz de usuario. Los elementos de la lista deben mostrarse en líneas separadas. Así que agregué el carácter de nueva línea \n como se muestra a continuación. Pero aún así los elementos de la lista se muestran en la misma línea. A continuación está el código. ¿Alguna idea de por qué no funciona?

Código de Typescript:

@Output() excludeDisplay: any = '';
@Output() includeDisplay: any = '';
includeValues: any = '';
excludeValues: any = '';

this.includeValues += this.merId + ',' + this.explodeStatus + '\n';
console.log("include values are "+ this.includeValues);
this.excludeValues += this.merId + ',' + this.explodeStatus + '\n';
console.log("exclude values are "+ this.excludeValues);
this.includeDisplay = this.includeValues;
this.excludeDisplay = this.excludeValues;

Código Html:

<ul id="excludedUl" required>{{ excludeDisplay }}</ul>
<ul id="includedUl" required>{{ includeDisplay }}</ul>

Código CSS:

#includedUl {
  float: right;
  width: 33%;
}

#excludedUl {
  float: right;
  width: 33%;
}

Respuesta #1

Necesita usar ancho fijo:

 <div style="width: 500px;white-space: pre-line">{{property}}</div>

En TypeScript, usa ''\n'' para agregar una nueva línea.

Respuesta #2

\n no causa un salto de línea en html.
Necesitarás usar un <br/> o envolver tu texto en un elemento de bloque.

this.includeValues += this.merId + ',' + this.explodeStatus + '<br/>';
this.excludeValues += this.merId + ',' + this.explodeStatus + '<br/>';

O

this.includeValues += '<div>' + this.merId + ',' + this.explodeStatus + '</div>';
this.excludeValues += '<div>' + this.merId + ',' + this.explodeStatus + '</div>';