How to make text preformated using CSS? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 20

How to make text preformated using CSS?

I want to add some prewritten pieces of text in my code but I don't want to get stuck with pre tags. How can I do it with CSS? I am really sorry if anyone has asked this question before. The search doesn't work for me today :(((

2nd Apr 2020, 11:52 AM
Dron Solarice
Dron Solarice - avatar
4 Answers
+ 23
Well, <pre> elements are just block elements preserving spaces. The first thing is you should add a selector to that "pieces of text", I'd prefer a class for that. Then style it with "white-space" and "display" property like so: .pre { display:block; white-space:pre-wrap; } You can also use monospace font, if you want to 😂.
2nd Apr 2020, 12:29 PM
🇺🇦 Vitya 🇺🇦
🇺🇦 Vitya 🇺🇦 - avatar
+ 22
No problem 😄. Нехай щастить 😉😉!
24th May 2020, 1:44 PM
🇺🇦 Vitya 🇺🇦
🇺🇦 Vitya 🇺🇦 - avatar
+ 14
Thanks a lot Vitya! Your answer helped me a lot ;))
24th May 2020, 1:41 PM
Dron Solarice
Dron Solarice - avatar
+ 5
the <pre> (stand for preformated) tag has css rule 'white-space:pre;' by default... wich is the property you need to mimic its behavior of not collapsing spaces, tabs and new lines. Another useful value for this property is 'pre-wrap' (same behavior -- keeping spaces -- but allowed to wrap).
2nd Apr 2020, 12:00 PM
visph
visph - avatar