When building a website or creating a web page, there are many times where we need to wrap text onto a new line. This can be necessary when we have limited space on a page or when we want to create an aesthetically pleasing layout. Luckily, with CSS, wrapping text onto a new line is a simple process. Here’s how to do it.

The first option to wrap text onto a new line is to use the ‘word-wrap’ property in CSS. This property is used to break long words and wrap them onto a new line. The ‘word-wrap’ property can be set to either ‘normal’ or ‘break-word’.

To set ‘word-wrap’ to ‘normal’, all you need to do is add the following code to your CSS file:

“`
p {
word-wrap: normal;
}
“`
This code will set the ‘word-wrap’ property to ‘normal’ for all paragraphs on your page. Setting ‘word-wrap’ to normal means that long words will not be broken and they will overflow outside of the container. This is the default value for the ‘word-wrap’ property.

To set ‘word-wrap’ to ‘break-word’, all you need to do is add the following code to your CSS file:

“`
p {
word-wrap: break-word;
}
“`

This code will set the ‘word-wrap’ property to ‘break-word’ for all paragraphs on your page. Setting ‘word-wrap’ to ‘break-word’ means that long words will be broken and wrapped onto a new line if they exceed the width of the container.

Another option to wrap text onto a new line is to use the ‘white-space’ property in CSS. This property controls how white space is handled between elements. The two values for the ‘white-space’ property that can be used to wrap text onto a new line are ‘normal’ and ‘pre-wrap’.

To set ‘white-space’ to ‘normal’, add the following code to your CSS file:

“`
p {
white-space: normal;
}
“`
This code will set the ‘white-space’ property to ‘normal’ for all paragraphs on your page. Setting ‘white-space’ to ‘normal’ means that any additional white space will be collapsed into a single space and words will be broken and wrapped onto a new line if they exceed the width of the container.

To set ‘white-space’ to ‘pre-wrap’, add the following code to your CSS file:

“`
p {
white-space: pre-wrap;
}
“`
This code will set the ‘white-space’ property to ‘pre-wrap’ for all paragraphs on your page. Setting ‘white-space’ to ‘pre-wrap’ means that additional white space and line breaks will be preserved and words will be broken and wrapped onto a new line if they exceed the width of the container.

In conclusion, there are various ways to wrap text onto a new line in CSS. Using the ‘word-wrap’ and ‘white-space’ properties can make it easy to adjust how text is displayed on your web page. By utilizing these techniques, you can create more visually appealing layouts and improve the overall readability of your content.