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

html

responsive-design

css

best-practices

byNikita Barsukov·Jan 24, 2025

Easily keep <div> content on one line through CSS: white-space: nowrap; to outlaw line breaks, overflow: hidden; to conceal text sprawl, and overflow: scroll; when you feel a scrollbar is the answer:

.div-oneline { 
    white-space: nowrap; // No more wrapping, because who likes presents anyway?
    overflow: hidden;  // Anything that goes beyond the border will be hidden, hide and seek!
}

<div class="div-oneline">Your single line text here.</div>

Be mindful to set a width on the div if you're trying to constrain its span.

Using ellipsis as a teaser

Occasionally, text exceeding the div width needs an elegant closure. The text-overflow: ellipsis; adds an air of mystery with the trusted "...":

.div-ellipsis { 
    white-space: nowrap; // The text shall not wrap. What is this, Christmas?
    overflow: hidden; // Hideaway for unruly text
    text-overflow: ellipsis; // Fancy trailing trim with dots...
}

Don't forget to set the div's width to witness our ellipsis in action:

<div class="div-ellipsis" style="width: 200px;">This text is too long to fit in the div.</div>

Responsive handling with media queries

In your responsive design journey, one-line div content may involve visual juggling. Fret not, media queries are here to ensure your layout adapts to different screen sizes without causing a text breakup:

.div-responsive { 
    white-space: nowrap; // Keeping everything inline,Strict disciplinarian!
    overflow: hidden; // Out of sight, out of mind
}

@media (max-width: 600px) {
    .div-responsive { 
        width: 100%; // Full occupancy. All seats reserved!
    }
}

Taming dynamic content

When your div's content decides to be adventurously dynamic, invoke JavaScript for enhanced control and earn the street cred of predicting div size adjustments or bespoke styling based on content length.

Bordering on brilliance

A border around the div could add the precise structure your content needs. It's not just about the aesthetics, but the visual distinction that it brings:

.div-bordered { 
    white-space: nowrap;  // No to wrap! Your code needs to diet.
    overflow: hidden;  // Stay within boundaries. Hide, extra, Hide!!
    border: 1px solid black;  // Contrasting border.. For content that wants to dress sharp
}

Corresponding HTML:

<div class="div-bordered">Content that should stay in one line.</div>

Watch out for the "wraps"

There are circumstances where your styles might not play nice:

Inline elements like a tags may still decide to wrap around within the div. If this plot twist emerges, ensure you're applying the styles to the riiight elements.
Long strands of text unbroken by spaces, such as URLs, might ignore the ellipsis and attempt a jailbreak from the container. You'll need a Plan B for this - perhaps CSS word-break: break-all;

CSS Jedi Tips

To effectively master one-line div contents, heed the following:

Test, test, test! And when you're tired, test some more across various browsers and devices.
Interactive developer tools are your best armor for inspecting and tweaking styles.
Go beyond basics, merge CSS methodologies, such as flexbox, for ultimate control over layouts and text.
Keep checking the pulse on CSS specifications - browsers have a habit of interpreting things differently as they evolve.