Which property is used to control the flow and formatting of text ?
In this article, we will discuss the property that is used to control the flow and formatting of text.
The white-space property in CSS is used to control the text wrapping and white-spacing ie., this property can be used to set about the handling of the white-space inside the elements. There are several types of values in this property to use.
Syntax:
white-space: normal| nowrap| pre |initial;
Property Values: All the properties are described well in the example below.
normal: By default, the property value is normal. When the white-space property of CSS is set to normal, every sequence of two or more white spaces will appear as a single white-space. The content in the element will wrap wherever necessary.
Syntax:
white-space: normal;
Example: This example illustrates the use of the white-space property whose property value is set to normal.
HTML
<!DOCTYPE html> < html > < head > < title > CSS | white-space Property </ title > < style > div { width: 500px; height: 500px; white-space: normal; background-color: limegreen; color: white; font-size: 80px; } </ style > </ head > < body > < center > < div > w3wiki: < br > A Computer Science Portal For Beginner. </ div > </ center > </ body > </ html > |
Output:
nowrap: When the white-space property of CSS is set to nowrap every sequence of two or more white-spaces will appear as a single white-space. The content in the element will not be wrapped to a new line unless explicitly specified.
Syntax:
white-space: nowrap;
Example: This example illustrates the use of the white-space property whose property value is set to nowrap.
HTML
<!DOCTYPE html> < html > < head > < title > CSS | white-space Property </ title > < style > div { width: 300px; height: 300px; white-space: nowrap; background-color: lightgreen; color: black; font-size: 25px; } </ style > </ head > < body > < center > < div >w3wiki: A Computer Science Portal For Beginner. </ div > </ center > </ body > </ html > |
Output:
pre: This value makes the white-space have the same effect as the <pre>tag in HTML. The content in the element will wrap only when specified using line breaks.
Syntax:
white-space: pre;
Example: This example illustrates the use of the white-space property whose property value is set to pre.
HTML
<!DOCTYPE html> < html > < head > < title > CSS | white-space Property </ title > < style > div { width: 300px; height: 300px; white-space: pre; background-color: lightgreen; color: black; font-size: 25px; } </ style > </ head > < body > < center > < div > w3wiki: A Computer science portal for Beginner. </ div > </ center > </ body > </ html > |
Output:
Contact Us