How to make text in one line CSS

Learn how to create single line text in CSS with an example. See how to use white-space, text-overflow & word-wrap properties to achieve desired results.

Using CSS to Create Single-Line Text

Creating single-line text using CSS is a straightforward process. To make text appear on one line, you need to add the following styling to the element containing the text:

  white-space: nowrap;
  overflow: hidden;

The white-space property specifies that whitespace within the element should not be collapsed or line-wrapped. The overflow property ensures that any content that extends beyond the width of the element is hidden.

For example, if you wanted to create a single-line heading, you could apply the styling above to the h1 element in your HTML:

  <h1 style="white-space: nowrap; overflow: hidden;">My Heading</h1>

The result would be a heading that appears on one line and is truncated if it exceeds the width of the container:

You can also add the styling to the h1 element in your CSS file, like so:

  h1 {
    white-space: nowrap;
    overflow: hidden;
  }

The styling will then be applied to all h1 elements on your page.

You can also apply the styling to any inline element, such as a span, to create single-line text. For example, you could create a single-line heading using a span like so:

  <h1>
    <span style="white-space: nowrap; overflow: hidden;">My Heading</span>
  </h1>

The result would be the same as if the styling was applied directly to the h1 element.

By using the white-space and overflow properties, you can easily create single-line text using CSS.