← flaviocopes.com

Preserving white space and line breaks in a string in HTML

Published Jul 02 2021

In a project I was rendering the description of a job which I got through a <textarea> field in a form, and I stored that in the database.

Now, this description was not interpreted as HTML, and when I added it to the page, the white space and line breaks were not respected by the browser.

I wanted this:

but I got this:

The solution was to add this CSS instruction:

white-space: pre-wrap;

which using Tailwind corresponds to the whitespace-pre-wrap class.

Wanna go from noobie to expert?

I wrote an entire book on this topic 👇

© 2023 Flavio Copes Flavio Copes using Notion to Site Notion to Site. Follow on Twitter

Solopreneur? Wannabe? Adventure awaits