How to Disable Word Wrapping in HTML

In this snippet, we’re going to demonstrate how you can disable word wrapping in HTML. Actually, this can be done with a few steps using some CSS properties.

To prevent the text from wrapping, you can use the CSS white-space property with the “nowrap” or “pre” value. In this snippet, you can see examples with both of them.

Create HTML

Usa an <h2> element and add a <div> element.

How to Disable Word Wrapping in HTML

<h2>Example</h2>
<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. Lorem Ipsum is simply dummy text.
</div>

Add CSS

Set the white-space property to “nowrap” for the <div> element.

How to Disable Word Wrapping in HTML

div {
  white-space: nowrap;
}

Now, let’s see the result.

Example of disabling word wrapping with the “nowrap” value of the white-space property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        white-space: nowrap;
        border: 1px solid #cccccc;
      }
    </style>
  </head>
  <body>
    <h2>Example</h2>
    <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. Lorem Ipsum is simply dummy text.
    </div>
  </body>
</html>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose">``<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. Lorem Ipsum is simply dummy text. </div> </div>### Example of disabling word wrapping with the “pre” value of the white-space property:

Example of disabling word wrapping with the “pre” value of the white-space property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        white-space: pre;
      }
    </style>
  </head>
  <body>
    <h2>Example</h2>
    <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. Lorem Ipsum is simply dummy text.
    </div>
  </body>
</html>

Try it Yourself »