How can I force div contents to stay in one line with HTML and CSS?

Issue

I have a long text inside a div with defined width:

HTML:

<div>Stack Overflow is the BEST!!!</div>

CSS:

div {
    border: 1px solid black;
    width: 70px;
}

How could I force the string to stay in one line (i.e., to be cut in the middle of "Overflow")?

I tried to use overflow: hidden, but it didn’t help.

Solution

Try this:

div {
    border: 1px solid black;
    width: 70px;
    overflow: hidden;
    white-space: nowrap;
}

Answered By – Bazzz

Answer Checked By – Dawn Plyler (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.