×

CSS White Space Property

White Space in CSS

The white-space CSS property describes how to show the content inside an element. This property is applied to manage a white space within an element.

Values of White-space Property

The following are the values that can be applied to the elements to show the content.

ValueDescriptionnormalThe normal value is the default value. The necessary text can be wrapped by using this value. The white space sequence will collapse into a specific white space.nowrapThe white space sequence will be collapsed into one particular white space. The text can’t be wrapped to the next line by using this value and can be broken only by using the <br> tag.preIn this value, whitespace is secured by a browser. This value is behaved like a <pre> html tag. The text will be wrapped only by using the line breaks.pre-lineWhite space sequence will be collapsed into a specific white space. The text can be wrapped if necessary, and only when using the line breaks.pre-wrapIn this value, whitespace is secured by a browser. The text will be wrapped only by using line breaks.initialThis property can be set-up as a default value by using this value.inheritIt can acquire the property from its parent element.

Example of White Space

Take a look on the following example of white space:

<!DOCTYPE html>
<html>
<head>
<style>
p
{
 white-space: pre;
}
</style>
</head>
<body>
<p>
Write any text..Write any text..Write any text..
Write any text..Write any text..Write any text..
Write any text..Write any text..Write any text..
Write any text..Write any text..Write any text..
Write any text..Write any text..Write any text..
</p>
</body>
</html>

Output:

← Prev Next →


Related Topics

CSS Transition

CSS Transition The transitions in CSS are influenced, included to modify the component from one design to another, without the use of the JavaScript or Flash. We should describe two of the...

2 minutes read.

CSS Clip

CSS Clip The Clip property in CSS describes the element’s visible area. It applies over the elements which are absolutely positioned (position: absolute ;). Generally, it is used when an image...

2 minutes read.

CSS Overlay

CSS Overlay: It measures to cover-up something’s surface along with a coating. CSS overlay sets anything over the top area of other things. It creates a web-page more attractive. The...

8 minutes read.

CSS Font-Size

A Cascading Style Sheet (CSS) is a simple design scripting language intended to simplify the process of making web pages more visually appealing with the kind of high-level formatting. Cascading...

3 minutes read.

CSS Text-stroke

Text-stroke Text-stroke CSS property inserts the stroke to any text and gives a decoration option to them also. It describes the stroke’s width and color for various text characters. It is...

2 minutes read.

CSS z-index Property

CSS z-index: CSS z-index permits us to represent any visual hierarchy over a 3D plane that is the z-axis. This index can be applied to describe the positioned element’s stacking...

2 minutes read.

CSS Pseudo-class

Pseudo-class The pseudo-class may be depicted as the keyword which can be mixed to any selector that specifies the elected element’s unique state. It can be included to a selector to...

6 minutes read.

CSS Page-break-inside Attribute

Page-break-inside Attribute As its name implies, the page-break-before property is applied to include page break inside any element, at the time of printing any document. It adds the page break before...

3 minutes read.

CSS Specificity

CSS Specificity: If one or more conflicting rules of CSS express a similar element, a browser will pursue a few rules to examine the specific one. Specificity can be specified...

3 minutes read.

CSS Width

CSS Width The width property in CSS sets the content width of area of the element. These properties do not provide margin and border features. It is used to set the...

1 minute read.

CSS Gradient

CSS Gradient: The CSS gradient property is applied to show the smooth transition inside two specified colors or more than two specified colors. Need of CSS Gradient The following are a few...

4 minutes read.

CSS Background-blend-mode

Background-blend-mode The background-blend-mode property sets a blend mode of the component’s every background layer (color/image). It illustrates how the element background image blends well with the element background color. We can...

9 minutes read.

Untitled Reusable Block

  ...

1 minute read.

CSS Font

CSS Font: CSS has font property, which makes the text more attractive. We can alter the entire look by changing font color, font size, font style, and much more. In...

5 minutes read.

CSS Color

CSS Colors: The CSS color property is used for setting the HTML element’s color. The color of the fonts and the color of the background can be set-up by using...

5 minutes read.

CSS Units

CSS Units In CSS, there are so many units available to show the length’s measurement. A single unit of CSS is applied to examine the size of the property, which the...

5 minutes read.

How to resize an image in CSS

How to resize an image in CSS? The resize image attribute is used in responsive web design to resize images to fit within the div container automatically. The resize image attribute...

3 minutes read.

CSS @keyframes rule

CSS @keyframes rule It describes the rule of animation that depicts the properties of CSS for the components at every state along with the timeline. We may make the properties of complex...

4 minutes read.

CSS Button Style

CSS button style: Using CSS properties, we can easily modify the default BUTTON and enhance its appearances using simple graphic commands. TYPES OF BUTTON STYLE: - Program to change button using CSS ...

35 minutes read.

CSS Links

CSS Link is used to create styled link. There are various ways to implement it. Styling Links Link can be styled with CSS properties like color, font-family, background etc. Example: <!DOCTYPE html>   <html>   <head>   <style>   a {       color: red;   }   </style>   </head>   <body>   <p><b><a href="https://www.tutorialandexample.com"    target="_blank">This is a link</a></b></p>   </body>   </html> Try Now There are four...

2 minutes read.