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)
Share your thoughts in the comments
Please Login to comment...