How Not to Wrap the Contents of <p>, <div>, and <span> Elements

Solution with the CSS white-space property

You can make the contents of HTML <p>, <div>, and <span> elements not to wrap by using some CSS. You need the white-space property. As we know, this property helps us to handle the spaces within the element.

So, if you want not to wrap the contents of the elements mentioned above, you need to use the “nowrap” value of the white-space property.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Example of making the content of the <p> element not to wrap:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     p {
       white-space: nowrap;
     }
   </style>
 </head>
 <body>
   <h1>White-space property example</h1>
   <p>
     Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
   </p>
 </body>
</html>

Result

Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.

In the following example, in the same way, we make the content of the <div> element not to wrap. Also, we’ll add a border.

Example of making the content of the <div> element not to wrap:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     div {
       white-space: nowrap;
       border: 1px solid green;
     }
   </style>
 </head>
 <body>
   <h1>White-space property example</h1>
   <div>
     Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
   </div>
 </body>
</html>

In our last example, we’ll make the content of the <span> element not to wrap, again with the white-space property. We’ll set the display of the <span> to “block”, then, specify its width and border.

Example of making the content of the <span> element not to wrap:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     span {
       display: block;
       width: 250px;
       border: 1px solid purple;
       overflow: hidden;
       white-space: nowrap;
     }
   </style>
 </head>
 <body>
   <h1>White-space property example</h1>
   <span>
     Lorem Ipsum is simply dummy text.Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text. Lorem Ipsum is simply dummy text.
   </span>
 </body>
</html>

Here, we also specified the overflow property with the “hidden” value, which allowed us to clip the content so as to fit the box.