- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Get this Text-Wrapping Effect With HTML/CSS?
Utilizing the CSS word-wrap property, large words are broken up and wrapped onto the following line. When an unbreakable string exceeds the length of the contained box, this feature is utilized to avoid overflow.
This attribute specifies where a word should break when it becomes too long for the container, preventing overflow. When the content goes above the boundary of the container, it specifies how the words should be broken.
Syntax
Following is the syntax for text-wrapping
word-wrap: normal | break-word | initial l inherit ;
For getting better understanding on how to get this text-wrapping effect with HTML/CSS, let’s look into the following examples
Example
In the following example, we're using the tag to create text-wrapping around an image that was uploaded.
<!DOCTYPE html>
<html>
<body>
<style>
body {
margin: 20px;
text-align: center;
background-color:#D5F5E3 ;
}
img {
float: left;
margin: 5px;
}
p {
text-align: justify;
font-size: 25px;
}
</style>
<div class="square">
<div>
<img src="https://www.tutorialspoint.com/images/logo.png" alt="Logo">
</div>
<p>
Tutorials Point originated from the idea that there exists a
class of readers who respond better to online content and prefer
to learn new skills at their own pace from the comforts of their
drawing rooms.
The journey commenced with a single tutorial on HTML in 2006 and
elated by the response it generated, we worked our way to adding
fresh tutorials to our repository which now proudly flaunts a wealth
of tutorials and allied articles on topics ranging from programming
languages to web designing to academics and much more.
</p>
</div>
</body>
</html>
When the script gets executed, it will generate an output consisting of an image along with the text that was wrapped around it and displayed on the webpage.
Example
Execute the below code to observe how text-wrap will work compared to the text without text-wrap.
<!DOCTYPE html>
<html>
<body>
<style>
.tutorial {
width: 200px;
background-color: #E8DAEF;
border: 2px solid black;
padding: 10px;
font-size: 20px;
}
.tutorial1 {
width: 11em;
background-color: #E9F7EF;
border: 2px solid black;
padding: 10px;
word-wrap: break-word;
font-size: 20px;
}
</style>
<h1> Without text-wrapping</h1>
<p class="tutorial"> Mahendra Singh Dhoni is an Indian former
international cricketer who was captain of the Indian national
cricket team....................................!!!!! </p>
<h1> Using text-wrapping</h1>
<p class="tutorial1"> Mahendra Singh Dhoni is an Indian former
international cricketer who was captain of the Indian national
cricket team....................................!!!!! </p>
</body>
</html>
When you run the above script, the output window will appear, displaying two types of text on the webpage: one without text-wrap and one with text-wrap.
Example
Consider the following example, where we are in an input field and placing a text with text-wrap inside it.
<!DOCTYPE html>
<html>
<body>
<style>
#tutorial {
word-wrap: break-word;
word-break: break-all;
height: 80px;
}
</style>
<input type="text" id="tutorial" value="Tutorials Point originated
from the idea that there exists a class of readers who respond better
to online content and prefer to learn new skills at their own pace from
the comforts of their drawing rooms." />
</body>
</html>
On running the above script, the output window will pop up, displaying the input field along with some text inside it on the webpage.
442 Views
