Introduction to CSS nowrap
Before getting into nowrap we have to understand white-space property in CSS. white-space property is used to break the line within the elements.
The white-space property contains 5 values
- normal
- nowrap
- pre
- pre-line
- pre-wrap
Therefore nowrap is value for the white-space property. Nowrap value with white-space property removes all white spaces and make all content into a single line. This property value never gives you content in a new line as the name clearly suggests there is no wrap. This nowrap value introduced in CSS3.
How does nowrap work in CSS?
CSS nowrap value given to white space property for collapsing multiple whitespaces into a single line. The nowrap text never displayed in the new line, it is always in a single line only.
Syntax:
div
{
White-space: nowrap;
}To understand the differences between nowrap and pre, pre-line, and normal, we have to understand all the white-space values.
Syntax #1 – normal
This is a default value for the white-space property. This means text wraps into the new line when it is needed.
div
{
White-space: normal;
}Syntax #2 – pre
Whitespaces are considered by the web browser. Text is going to wrap only online breaks.
div
{
White-space: pre;
}Syntax #3 – pre-line
It will collapse multiple lines into a single line, the next break to the new line whenever it is needed.
div
{
White-space: pre-line;
}Syntax #4 – pre-wrap
Whitespaces are considered by the web browser. Text is going to wrap when necessary, and on any line breaks.
div
{
White-space: pre-wrap;
}Output: In CSS white-space property is actually following the chart and map to text, space, and collapse as given below.
Examples to Implement CSS nowrap
Below are examples mentioned:
Example #1
Difference between nowrap and normal values
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
white-space: nowrap;
}
.p2 {
white-space: normal;
}
.p1, .p2
{
border: 2px solid maroon;
font-size: 22px;
color: navy;
}
h1
{
color: green;
text-align: center;
}
h2
{
color: blue;
}
</style>
</head>
<body>
<h1>Difference between nowrap and normal values of white-space property</h1>
<h2>white-space: nowrap</h2>
<p class="p1">
Before get into nowrap we have to understand white-space property in CSS.
white-space property is used to break the line within the element's.
CSS nowrap value given to white space property for collapsing multiple whitespaces into single line.
The nowrap text never displayed in new line, it is always in a single line only.
</p>
<h2>white-space: normal</h2>
<p class="p2">
This is a default value for the white-space property. This means text wraps into new line when it is needed.
Whitespaces are considered by the web browser. Text is going to wrap only on line breaks.
It will collapse multiple lines into single line, the text break to the new line whenever it is needed.
Whitespaces are considered by the web browser. Text is going to wrap when necessary, and on any line breaks.
</p>
</body>
</html>Output:
Example #2
Difference between nowrap and pre-values
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
white-space: nowrap;
}
.p2 {
white-space: pre;
}
.p1, .p2
{
border: 2px solid red;
font-size: 22px;
color: brown;
}
h1
{
color: green;
text-align: center;
}
h2
{
color: blue;
}
</style>
</head>
<body>
<h1>Difference between nowrap and pre values of white-space property</h1>
<h2>white-space: nowrap</h2>
<p class="p1">
Before get into nowrap we have to understand white-space property in CSS.
white-space property is used to break the line within the element's.
CSS nowrap value given to white space property for collapsing multiple whitespaces into single line.
The nowrap text never displayed in new line, it is always in a single line only.
</p>
<h2>white-space: pre</h2>
<p class="p2">
This is a default value for the white-space property. This means text wraps into new line when it is needed.
Whitespaces are considered by the web browser. Text is going to wrap only on line breaks.
It will collapse multiple lines into single line, the text break to the new line whenever it is needed.
Whitespaces are considered by the web browser. Text is going to wrap when necessary, and on any line breaks.
</p>
</body>
</html>Output:
Example #3
Difference between nowrap and pre-line values
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
white-space: nowrap;
}
.p2 {
white-space: pre-line;
}
.p1, .p2
{
border: 2px solid blue;
font-size: 22px;
color: red;
}
h1
{
color: orange;
text-align: center;
}
h2
{
color: maroon;
}
</style>
</head>
<body>
<h1>Difference between nowrap and pre-line values of white-space property</h1>
<h2>white-space: nowrap</h2>
<p class="p1">
Before get into nowrap we have to understand white-space property in CSS.
white-space property is used to break the line within the element's.
CSS nowrap value given to white space property for collapsing multiple whitespaces into single line.
The nowrap text never displayed in new line, it is always in a single line only.
</p>
<h2>white-space: pre-line</h2>
<p class="p2">
This is a default value for the white-space property. This means text wraps into new line when it is needed.
Whitespaces are considered by the web browser. Text is going to wrap only on line breaks.
It will collapse multiple lines into single line, the text break to the new line whenever it is needed.
Whitespaces are considered by the web browser. Text is going to wrap when necessary, and on any line breaks.
</p>
</body>
</html>Output:
Example #4
Difference between nowrap and pre-wrap values
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
white-space: nowrap;
}
.p2 {
white-space: pre-wrap;
}
.p1, .p2
{
border: 2px solid green;
font-size: 22px;
color: fuchsia;
}
h1
{
color: orange;
text-align: center;
}
h2
{
color: maroon;
}
</style>
</head>
<body>
<h1>Difference between nowrap and pre-wrap values of white-space property</h1>
<h2>white-space: nowrap</h2>
<p class="p1">
Before get into nowrap we have to understand white-space property in CSS.
white-space property is used to break the line within the element's.
CSS nowrap value given to white space property for collapsing multiple whitespaces into single line.
The nowrap text never displayed in new line, it is always in a single line only.
</p>
<h2>white-space: pre-wrap</h2>
<p class="p2">
This is a default value for the white-space property. This means text wraps into new line when it is needed.
Whitespaces are considered by the web browser. Text is going to wrap only on line breaks.
It will collapse multiple lines into single line, the text break to the new line whenever it is needed.
Whitespaces are considered by the web browser. Text is going to wrap when necessary, and on any line breaks.
</p>
</body>
</html>Output:
Conclusion
Nowrap in CSS is the white-space property value. Which is used to remove all white spaces and keep all the content in a single line? White space property is used to break the lines.
Recommended Articles
This is a guide to CSS nowrap. Here we discuss an introduction to CSS nowrap, how does it works with respective programming examples. You can also go through our other related articles to learn more –
