How to Get Text-Wrapping Effect using CSS ?

In this article, we are going to learn how to achieve a text-wrapping effect with CSS. In web design, we create visually appealing and readable text that is essential for engaging user experiences. One effective technique to enhance the readability and aesthetics of text is by implementing a text-wrapping effect. This effect ensures that long lines of text automatically wrap to the next line preventing horizontal scrolling and maintaining a comfortable reading experience.

Approach 1: Using CSS word-wrap Property

The word-wrap property in CSS allows long words to be broken & wrapped onto the next line if they exceed the width of the container.

Syntax:

.container {
 word-wrap: break-word;
}

Example: By applying the word-wrap: break-word; style to the container element. the long words will be broken and wrapped onto the next line if they don't fit within the available width. This approach ensures that the text stays within the container without causing a horizontal overflow.

Output:

👁 chrome-capture-2023-5-23.png

Approach 2: Using CSS overflow-wrap Property

The overflow-wrap property in CSS specifies how the browser should break lines within the words when they exceed the width of the container.

Syntax:

.container {
 overflow-wrap: break-word;
}

Example: By applying the overflow-wrap: break-word; style to the container element. the lines will break at any character within a word to prevent overflow ensuring that the text wraps within the container.

Output:

👁 chrome-capture-2023-5-23-(1).png

Approach 3:Using the CSS hyphens Property

The Hyphens Property in CSS tells us how the words should be hyphenated to create soft wrap opportunities within words.

Syntax:

.container {
 hyphens: auto;
}

Example: In this example, we are using the above-explained approach.

Output:

👁 chrome-capture-2023-5-23-(2).png