How to Get Text-Wrapping Effect using CSS ?
Last Updated :
06 Sep, 2023
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.
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.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
word-wrap: break-word;
border: 1px solid black;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="container">
<h3>
The word-wrap property in CSS is used to
break long words and wrap them into the
next line. It defines whether to break words
when the content exceeds the boundaries
of its container.
</h3>
</div>
</body>
</html>
Output:
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.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Using overglow wrap property</title>
<style>
.container {
width: 200px;
overflow-wrap: break-word;
border: 1px solid black;
background-color: gray;
}
</style>
</head>
<body>
<div class="container">
<h5>
The overflow-wrap property in CSS is
used to specify that the browser may
break lines of text inside any
targeted element to prevent overflow
when the original string is too long
to fit.
</h5>
</div>
</body>
</html>
Output:
.png)
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.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
hyphens: auto;
border: 1px solid black;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="container">
The Hyphens Property in CSS tells us how the
words should be hyphenated to create soft wrap
opportunities within words.
auto: This property lets the algorithm break
the words at appropriate hyphenation points.
</div>
</body>
</html>
Output:
.png)
Similar Reads
Text Split Effect using CSS The Text Split Effect in CSS is a popular and visually engaging technique that breaks up a block of text into individual letters or words, which are then animated or styled separately. This effect can add a creative touch to any webpage, making it dynamic and interactive.In this article, we will exp
4 min read
How to Apply Shadow Effect on Text Using CSS? The CSS text-shadow property is used to add a shadow to the text.Adding a shadow to text using CSS text-shadowThe text-shadow property of CSS is used to apply the shadow effect on text. It takes four values verticalShadow, horizontalShadow, blur, and color.Syntaxtext-shadow: verticalShadow horizonta
1 min read
How to Wrap Table Cell td Content using CSS? The word-wrap, and word-break properties in CSS are used to wrap content within a table cell (<td>).HTML<h3 style="text-align:center;"> Simple Example Without Word Wrap </h3> <table width="600" style="border-spacing: 0px; table-layout: fixed; margin-left:auto; margin-right:auto;
3 min read
How To Create Carved Text Effect using CSS? The carved text effect is also known as the embossed effect as it looks like the text has been embossed on a background. It is also known as Neumorphism in CSS. This effect is used when we want to give our website a clean and refreshing look. The embedded text can be of the same color as the backgro
2 min read
How to wrap a text in a <pre> tag using CSS ? In this article, we will learn how to wrap a text in a <pre> tag. The <pre> tag is used to display the block of preformatted text which preserves the text spaces, line breaks, tabs, and other formatting characters which are ignored by web browsers. By default, the <pre> tag does no
2 min read
How to Create Engraved Text Effect using HTML and CSS ? The engraved text effect is an effect that you can use in your websites as a heading or a sub-heading to make it look more pleasing and attractive. Approach: The engraved text effect can be easily generated using HTML and CSS. First we will create a basic text using HTML and then by using the CSS te
2 min read