How to render line breaks contained in a string? - string

Question

Line breaks contained in my strings merely render as <br> instead of actual line breaks.
I tried to use back-ticks to no avail. Is there a simple way to have line breaks rendered on the page, ideally without modify my code too deeply?
Markup:
<div
v-for="item in faqItems"
:key="item.id"
>
<span class="faq-item-title">
{{ item.title }}
</span>
<span class="faq-item-details">
{{ item.text }}
</span>
<svg-icon name="chevron-down"></svg-icon>
</div>
JS:
faqItems: [
{
title: 'Nullam vehicula arcu ipsum',
text: 'Donec sit amet nisl finibus, pharetra orci ut, aliquet diam.<br><br>Nunc cursus libero luctus nunc vestibulum placerat. Mauris vel dolor sit amet orci rutrum sollicitudin.<br><br>Donec neque leo, porttitor a diam et, sodales volutpat libero.'
},
{
title: 'In iaculis egestas nisl',
text: 'Etiam a elementum diam. Praesent lobortis pulvinar lacus, sit amet vehicula tortor.'
}

Answer 1

One way is to replace your <br>s with text line breaks (\n) and keep using it as text in layout:
{
title: 'Nullam vehicula arcu ipsum',
text: 'Donec sit amet nisl finibus, pharetra orci ut, aliquet diam.\n\nNunc cursus libero luctus nunc vestibulum placerat. Mauris vel dolor sit amet orci rutrum sollicitudin.\n\nDonec neque leo, porttitor a diam et, sodales volutpat libero.'
}
As Daniel pointed out, literal line breaks don't work in <span>. Unless you map it to .innerText property of the <span> => Example - which, under the hood, transforms all literal breaks into <br>s and divides the text into different text nodes, accordingly).
The other way is to use the dedicated Vue directive for this purpose, which parses the string as html: v-html.
<span class="faq-item-details" v-html="item.text" />

Answer 2

Use backticks and then add css entries as follows:
<div
v-for="item in faqItems"
:key="item.id"
>
<span class="faq-item-title" style="white-space: pre-wrap;">
{{ item.title }}
</span>
<span class="faq-item-details" style="white-space: pre-wrap;">
{{ item.text }}
</span>
<svg-icon name="chevron-down"></svg-icon>
</div>