The “word-wrap” is the property in CSS which is used for breaking the long word and adjusting this word in the specified space. When we set the value of this “word-wrap” property to normal, it will be used as the default value and will not break the long word. When we set the value of this “word-wrap” property to break-word, it will break the long word according to the specified space. The break-word is the keyword that is used as the value of the “word-wrap” property and breaks the long word in CSS.

In this tutorial, we will provide complete guidance about this “word-wrap” property and will perform examples where we will use the CSS “word-wrap” property.

Example # 1:

We are going to begin our code and run it in Visual Studio Code. We start by launching a new file and then select HTML as the language. Now, type “!” and press “Enter.” Here you will find all the HTML basic tags. As a result, we won’t have to manually add all these tags. After all this, we just insert the name of the CSS file in the “link” tag in the “head”. We put two headings in the body and create a div in which we write one long word so that we will use the “word-wrap” property in CSS and will show you how it works.

We are decorating the heading by applying “color” and setting it to the “red” using the “text-decoration” property and using the keyword “underline” for this property. We apply styling to this heading to make it attractive. We also decorate the second heading: “green” as the “color” and apply the “text-decoration” and set it to “underline”. We are setting the “width” of the “div” as “150px” and creating a “border” around it. This border is about “3px” in its “width” and it is a “solid” type, “red” in the “color”.

Here, we are applying the “word-wrap” property and setting it to “normal” which is also the “default” value. It will not break the long word. The long word will appear as it is written in the HTML code. It will cross the border which we have created for the div and the long text remains the same, it will not break this word.

The output shows that the long word appears the same as we write it in the HTML file. It crosses the borderline and appears in one line. The long word is not broken here because it sets the “word-wrap” property to “normal” which is the same as the “default”.

Example # 2:

We are using the same HTML code and now we are going to apply the “break-word” keyword as the value of the “word-wrap” property in this example.

The “color” for the heading 1 “h1”, we are utilizing “maroon” and utilizes the “text-decoration” for underlining this heading. For “h2” we utilize “purple” as the “h2” “color” and “underline” heading as well. The “width” of the “div” container is “160px” and design a border around it by utilizing the “border” property. We set “3px” for the div’s border “width” which is of the “solid” form and “maroon” in the color. Here, is the “word-wrap” property in which we use the “break-word” value. This value will break the long word according to the specified space. We will look at the output and will know how the long word breaks by utilizing this property.

Notice how the long word is broken and adjusted inside the div container. This long word is broken in this output because we utilize the “break-word” value for the “word-wrap” property.

Example # 3:

We have two headings “h1” and “h2”. Below these headings, we have two different divs with the name “a”, and “b”. We write the text inside both divs and put a long word in each div. Now, we are creating a CSS file in which we will utilize the “word-wrap” property.

We use the “color” property and define it as “green” to decorate the heading as well as the “text-decoration” property and the keyword “underline” for this “text-decoration” property. We also use “orange” as the “color” for the next heading and we implement “text-decoration” with “underline” as the setting. We set the “width” of the “div” as “180px”, which will set this width for both divs because we don’t mention the name of any div here. We also utilize the “border” property which also applies to both divs. The “width” of the border for both divs is “3px”, “solid” type and “blue” is set for the “color” of the border.

We mention the name of the first div which is “div. a” and then the “word-wrap” attribute is applied. The value is set to “normal” which is also the “default” value. The long word is not broken for this div. The long word will be displayed exactly as it is typed in HTML code. Now, we have the second div which is “div. b”. For this, we are utilizing the “word-wrap” property and the “break-word” value is used. The long word will be broken according to the provided space with this value. By leveraging this property and value, we will be able to see how the long word splits in the output.

The long word of the first div is not broken because we use “normal” as the value of “word-wrap” for the “div. a”. But in the second div, you can see that the long word is also adjusted in the specified space. This long word that is present inside the second div is broken. This is because of the usage of the “break-word” value of the “word-wrap” property.

Example # 4:

We create headings for this example and put two paragraphs with the different class names as “par” for the first paragraph and “par1” for the second paragraph. We also put a long word in both paragraphs and will use the “word-wrap” property in CSS.

The heading’s “color” is set in rgb form. Its value is “rgb (112, 6, 6)”, which is a “maroon” shade. We also use the “Algerian” font-family for “h1”. We also set the “font-family” of “h2” as “Times New Roman”. The “color” of h2 is “blue-violet” and style it as “italic” to make it attractive.

Now, comes “par” which defines the first paragraph. The “width” we are defining here is “200px” and we set its “background-color” as “light-blue”. We also want to create the border for this, so we utilize “border” and set it to “2px solid black”. The “padding” we are describing is “10px” and the size of the text of the paragraph is “20px” for “par”. We don’t use the “word-wrap” property for this paragraph.

After this, we have another paragraph with the name “p1”. We’ve defined the “width” as “11em” and the “background-color” as “light-blue”. We’ll also need a border for this, so we are using the “border” and configuring it to “2px solid black.” The “padding” we’re talking about is “10px”. We are utilizing the “word-wrap” property and set it to “word-break” which we have discussed in our previous codes and the size of the paragraph text is “20px” for “par1”.

Here, the long word of the first paragraph is not broken because we don’t use the “word-wrap” property for this, it is set as default. But we use the “word-wrap: break-word” for the second paragraph, so the long word of the paragraph is broken.

Conclusion:

The purpose of this tutorial is to teach you how to use the CSS “word-wrap” property. In this tutorial, we’ve looked at the CSS “word-wrap” property and described what it is, how to use it, and how it works. We have explained that this property breaks the long word and adjusts this long word in the specified space. We’ve also shown examples of how to use this “word-wrap” property, as well as the results of all the examples.