CSS white-space nowrap

The CSS white-space property is used to control how whitespace inside an element is handled. The value nowrap is a possible option for this property, and it is used to prevent text from wrapping onto multiple lines.

Syntax

The syntax for setting the white-space property with the nowrap value is as follows:

selector {
  white-space: nowrap;
}

Usage

The white-space property is often used in combination with the overflow property to control how text overflows when there isn't enough horizontal space to display it all. By setting white-space: nowrap and overflow: hidden on an element, a single line of text can be displayed without wrapping, and any overflow beyond that single line will be hidden.

.mysingleline {
  white-space: nowrap;
  overflow: hidden;
}

Example

<div class="mysingleline">
  This text will not wrap onto multiple lines when the container is too narrow.
</div>

Conclusion

The white-space property with the nowrap value can be a useful tool for controlling text flow in situations where wrapping onto multiple lines is undesirable. By setting this property on an element, text can be forced to stay on a single line, making it easier to create clean and modern designs.