In my Vue project, I'm passing a lengthy text as a prop to a child component.
Here is the code for the child component:
<template>
<div class="story">
<p class="story__content">{{ content }}</p>
</div>
</template>
This is how it's used in the parent component:
<story
content="Before your trip, I recommend researching the destination to find the most interesting photo opportunities.\n I always research the location I’m traveling to.\n I do this extensively and obsessively!"
/>
I attempted to use CSS within the <p> tag of the child component like this:
.story__content {
white-space: pre-wrap;
}
However, instead of displaying line breaks, the text appeared without any breaks like this: https://i.sstatic.net/60Pjv.png
Has anyone encountered a similar issue? Thank you in advance for any help!