Hi,
I have Card to display text. In the text string, there are \n as line breaker. But <Card> does not break lines on \n.
Here is my code:
<Card /* title={item.status} subTitle={item.date} */>
{item.image && <img src={`assets/demo/images/product/${item.image}`} onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/u ... holder.png')} alt={item.name} width={200} className="shadow-2 mb-3" />}
<p>
{item.text}
</p>
<p>
{item.status}
</p>
</Card>
I want {item.text} to break on \n in the text. How can I do that?
Thanks,
James
how to break lines on \n in Card
You might need to replace `\n` with `<br>` the HTML breaking space?
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
you have to use dangerouslySetInnerHTML so it translates the breaks?
Code: Select all
<p dangerouslySetInnerHTML={{ __html: item.text }}></p>
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1
-
- Information
-
Who is online
Users browsing this forum: No registered users and 7 guests