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.

Updated on: 20-Apr-2023

577 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements