Preserving white space and line breaks in a string in HTML

In my job board 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, th…


This content originally appeared on flaviocopes.com and was authored by flaviocopes.com

In my job board 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.


This content originally appeared on flaviocopes.com and was authored by flaviocopes.com


Print Share Comment Cite Upload Translate Updates
APA

flaviocopes.com | Sciencx (2021-07-02T05:00:00+00:00) Preserving white space and line breaks in a string in HTML. Retrieved from https://www.scien.cx/2021/07/02/preserving-white-space-and-line-breaks-in-a-string-in-html/

MLA
" » Preserving white space and line breaks in a string in HTML." flaviocopes.com | Sciencx - Friday July 2, 2021, https://www.scien.cx/2021/07/02/preserving-white-space-and-line-breaks-in-a-string-in-html/
HARVARD
flaviocopes.com | Sciencx Friday July 2, 2021 » Preserving white space and line breaks in a string in HTML., viewed ,<https://www.scien.cx/2021/07/02/preserving-white-space-and-line-breaks-in-a-string-in-html/>
VANCOUVER
flaviocopes.com | Sciencx - » Preserving white space and line breaks in a string in HTML. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/07/02/preserving-white-space-and-line-breaks-in-a-string-in-html/
CHICAGO
" » Preserving white space and line breaks in a string in HTML." flaviocopes.com | Sciencx - Accessed . https://www.scien.cx/2021/07/02/preserving-white-space-and-line-breaks-in-a-string-in-html/
IEEE
" » Preserving white space and line breaks in a string in HTML." flaviocopes.com | Sciencx [Online]. Available: https://www.scien.cx/2021/07/02/preserving-white-space-and-line-breaks-in-a-string-in-html/. [Accessed: ]
rf:citation
» Preserving white space and line breaks in a string in HTML | flaviocopes.com | Sciencx | https://www.scien.cx/2021/07/02/preserving-white-space-and-line-breaks-in-a-string-in-html/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts