calcite-list-item description with Carriage Returns

[Dirk_Vandervoort]

Greetings.

I have a calcite-list. I would like its child calcite-list-items to have descriptions that include carriage returns. The calcite-list-items are created in JS code:

const item = document.createElement("calcite-list-item");
item.setAttribute("label", "This is the label);
item.setAttribute("value", someValue);
const theDescription = "First Line \n Second Line"
item.setAttribute("description", theDescription);
document.getElementById("my-calcite-list").appendChild(item);

The "\n" is not obeyed and the resulting description is "First Line Second Line".

I would like to include carriage returns in the description.

TIA for your help.

[KittyHurley · Accepted solution]

@Dirk_Vandervoort You could set the CSS white-space property to "pre-line", to determine how white space is handled inside the element:

https://codepen.io/geospatialem/pen/RwOVKQy

#my-calcite-list-item {
  white-space: pre-line;
}