In this tutorial we are gonna have a look about Handling White Spaces by CSS there is a problem with HTML

The Problem

If you are a web developer or have knowledge of HTML you might know that white spaces mean the gaps of the new line which we do in the text editor by pressing ENTER key in an HTML Document are not rendered on the webpage it means like if you have an HTML Document like this

<!DOCTYPE html>
<html>
<head>
	<title>White Spaces by CSS</title>
</head>
<body>
	<p>It is a Paragraph
AND YEAH IT IS GOOD </p>
</body>
</html>

So as you can see we have a gap between these 2 phrases in a single paragraph but when we will render it all these spaces will collapse and we will get it like this

let’s see how it looks like

as you can see all the extra white spaces are gonna actually this is good if you don’t know when to add space but there is also an issue with this that for adding spaces or changing the line we need to use different tags to optimize the text as we won’t like the br tag or we need to change the para but sometimes it doesn’t meet what we want it to meet

The Solution

So here comes the solution the white-space property of CSS which actually specifies you how to play with your white spaces and optimize your text content at its peak

white-space

So what is white-space actually ?? So white-space is a CSS property which is there to help you with introducing multiple white spaces in a single HTML document or changing the line without using or changing any tags

Let’s see it’s different values it can work with and there effect for this tutorial i am using lorem text to give you a more good understanding

normal

The normal this the by default value for an HTML Document as you have seen above example will consider a lot of spaces as a single space that’s normal means normal LOL

in normal all the spaces collapse into a single white space and the text will wrap only when necessary as happens in our HTML DOC

it is the default style of the HTML DOCUMENT like we have in the above example in which we have a code like this

<!DOCTYPE html>
<html>
<head>
	<title>White Spaces by CSS</title>
</head>
<body>
	<p>It is a Paragraph
AND YEAH IT IS GOOD </p>
</body>
</html>

which give a result like this

white-space : normal
white-space normal

maybe i don’t need to explain about it

pre

The pre is just like our HTML tag pre if you don’t know what it is i recommend reading MDN DOCS after this tutorial if you didn’t understand it but you will

so actually what pre does is it in pre all the whitespaces are preserved by the browser and Text will only wrap on line breaks

Let’s see an example of it as well suppose we have a code like this

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		p{
			white-space: pre;
		}
	</style>
	<title>White Spaces by CSS</title>
</head>
<body>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,                             sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

which gives us an output like this

as you can clearly see it works as same as our pre tag in HTML

nowrap

In nowrap, the sequences of white spaces collapse into a single white space and the text will not wrap to the next line means it will continue to a straight line no matter how much big paragraph it is until it doesn’t reach a <br> tag

Let’s see an example of it

As you can see when we use the below code

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		p{
			white-space: nowrap;
		}
	</style>
	<title>White Spaces by CSS</title>
</head>
<body>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

It gives us a result like this

you can also notice the arrow pointing towards the slider to slide and continue the reading that is due to nowrap means the line will not break the whole para will go into a single line

pre-line

One of the issues with pre is that it doesn’t wrap the text the new Lines will count but the text will continue in a single line until we don’t add <br>

In pre-wrap, the whitespaces will be preserved by the browser and the text will wrap when necessary or with line breaks the line will end

It is a combination of pre and wrap it is just same as editing in our text editor or when we edit in our WORD or EXCEL kind of stuff

Let’s see an example to give you an example

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		p{
			white-space: pre-wrap;
		}
	</style>
	<title>White Spaces by CSS</title>
</head>
<body>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

this will give output like this

Wrapping UP

So now maybe you got how to use white-break and what it can do if you still have a query you can reach out to me criticism and appreciations are also welcomed and if you loved it you can check other posts as well my recommendation would be var vs let vs const : what to use when