Prevent Text from Wrapping in CSS

Prevent Text from Wrapping in CSS

  • CSS
  • 1 min read

To prevent text from wrapping in CSS, you can use the white-space property with the nowrap value. This property controls how whitespace inside an element is handled, and the nowrap value tells the browser to not wrap the text at all.

Here is an example of how you can use the white-space property with the nowrap value to prevent text from wrapping in CSS:

.no-wrap {
  white-space: nowrap;
}

In this example, we define a no-wrap class that sets the white-space property to nowrap. To apply this class to an element, you can use the class attribute of the element and specify the name of the class as its value. For example:

<p class="no-wrap">
  This text will not wrap.
</p>

In this example, we apply the no-wrap class to a <p> element using the class attribute. This will prevent the text inside the <p> element from wrapping, and the text will be displayed on a single line instead.

Related:

  1. How to Disable Drag Image Using CSS?