AI Workshop: learn to build apps with AI →
HTML Tips: Preserving white space and line breaks in a string in HTML

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.


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

Now, this description was not interpreted as HTML, and when I added it to the page, the whitespace 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.

Lessons in this unit:

0: Introduction
1: ▶︎ Preserving white space and line breaks in a string in HTML
2: HTML, avoid displaying a broken image if the image is not found
3: The HTML figure tag
4: Change image source in dark mode
5: Accept only images in file input
6: HTML comments
7: Some useful tricks available in HTML5
8: How to make an hr invisible
9: Conditionally set an HTML attribute
10: An HTML element id is a global variable