Force the text in a Div to stay in one Line in HTML & CSS

# Table of Contents

# Force the text in a Div to stay in one Line in HTML & CSS

To force the text in a div element to stay in one line using HTML and CSS:

Set the element's white-space CSS property to nowrap to suppress line breaks.
Set the overflow CSS property to hidden to clip the remaining text.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      #box {
        border: 1px solid black;
        width: 200px;

        white-space: nowrap;
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <div id="box">
      bobbyhadz.com - Some very long text here abc one two three.
    </div>
  </body>
</html>

force div text to stay in one line

The code for this article is available on GitHub

When the white-space CSS property is set to nowrap, white space is collapsed, however, line breaks are suppressed.

index.css

Copied!
#box {
  border: 1px solid black;
  width: 200px;

  white-space: nowrap;
  overflow: hidden;
}

In other words, the nowrap value disables text wrapping within the source.

There is also a pre value of the white-space CSS property.

The pre value preserves the white space and only breaks lines at newline characters and <br> elements in the source.

index.css

Copied!
#box {
  border: 1px solid black;
  width: 200px;

  white-space: pre;
  overflow: hidden;
}

set white space to pre to preserve whitespace

The code for this article is available on GitHub

When the overflow CSS property is set to hidden, then the overflowing content is clipped at the element's padding box.

There are no scroll bars and the clipped content is not visible.

If you don't set the overflow property to hidden, then the overflowing characters would still get shown.

index.css

Copied!
#box {
  border: 1px solid black;
  width: 200px;

  white-space: nowrap;
  /* 👇️ unset this property */
  /* overflow: hidden; */
}

without setting overflow to hidden

# Displaying an ellipsis if the text overflows

You could also set the text-overflow CSS property to ellipsis if you want to add an ellipsis when the text overflows.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      #box {
        border: 1px solid black;
        width: 200px;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    </style>
  </head>

  <body>
    <div id="box">
      bobbyhadz.com - Some very long text here abc one two three.
    </div>

  </body>
</html>

force div text to stay in one line with ellipsis

The code for this article is available on GitHub

When the text-overflow CSS property is set to ellipsis, then an ellipsis ... is displayed to represent the clipped text.

If you're working with a span element, make sure to set its display property to inline-block or block for the width CSS property to take effect.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      #box {
        border: 1px solid black;
        width: 200px;
        display: inline-block;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    </style>
  </head>

  <body>
    <span id="box">
      bobbyhadz.com - Some very long text here abc one two three.
    </span>
  </body>
</html>

setting display to inline block on span

The code for this article is available on GitHub

If you don't set the display property of a span to block or inline-block, the width property won't work.

# Force a single line of text to fill the width of a container using CSS

If you need to force a single line of text to fill the width of a container:

Set the text-align property on the element to justify.
Use the ::after pseudo-selector to create a pseudo-element.
Set the element's display to inline-block and its width to 100%.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      #box {
        text-align: justify;

        width: 530px;
        border: 1px solid black;
      }

      #box::after {
        content: '';
        display: inline-block;
        width: 100%;
      }
    </style>
  </head>

  <body>
    <div id="box">bobbyhadz.com - Some very wide text.</div>
  </body>
</html>

force single line of text to fill width

The code for this article is available on GitHub

We first set the text-align property of the div element to justify.

index.css

Copied!
#box {
  text-align: justify;

  width: 530px;
  border: 1px solid black;
}

The justify value is used, the text is spaced to line up its left and right edges to the left and right edges of the container, except for the last line.

The next step is to use the ::after pseudo-selector to create a pseudo-element that is the last child of the selected element.

index.css

Copied!
#box::after {
  content: '';
  display: inline-block;
  width: 100%;
}

We used an empty string for the content of the pseudo-element and:

Set its display CSS property to inline-block to generate a block element box so we can set the width property.
Set the pseudo-element's width to 100% to have it span the whole width.

Now the text in the div element is forced to fill the single line regardless of the width of the container.

force single line of text to fill width

The code for this article is available on GitHub

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Force the text in a Div to stay in one Line in HTML & CSS

# Table of Contents