How to wrap text in CSS

by Online Tutorials Library July 14, 2022

How to wrap text in CSS?

CSS word-wrap property is used to break the long words and wrap onto the next line. This property is used to prevent overflow when an unbreakable string is too long to fit in the containing box.

This property defines the breaks in the word to avoid the overflow when a word is too long to fit in the container. It specifies the breaking of words when the content exceeds the container’s boundary.

Syntax

Values

normal: It is the default value that is used to break words only at allowed breakpoints.

break-word: It is used to break the unbreakable words.

initial: It is used to set the property to its default value.

inherit: It inherits the property from its parent element.

Example

  <!DOCTYPE html>      <html>      <head>      <style>       .test {          width: 200px;          background-color: lightblue;           border: 2px solid black;          padding: 10px;        font-size: 20px;            }    .test1 {          width: 11em;          background-color: lightblue;           border: 2px solid black;          padding: 10px;          word-wrap: break-word;          font-size: 20px;    }        </style>      </head>      <body>    <h1> Without Using word-wrap </h1>    <p class=”test”> In this paragraph, there is a very long word:       iamsooooooooooooooooooooooooooooooolongggggggggggggggg. </p>      <h1> Using word-wrap: break-word; </h1>    <p class=”test1″> In this paragraph, there is a very long word:       iamsooooooooooooooooooooooooooooooolongggggggggggggggg. The long word will break and wrap to the next line. </p>      </body>      </html>    

Test it Now

Output

How to wrap text in CSS

Next TopicHow to italicize text in CSS

How to wrap text in CSS

How to wrap text in CSS?

Syntax

Values

Example

CSS translate() function

Axis API in D3.js

You may also like