Css fixed width in a span

html

responsive-design

best-practices

css

byAnton Shumikhin·Dec 13, 2024

Let's jump directly into the code. Here's a minimal set-up to apply a fixed width to a <span> element using CSS with a .fixed-width class:

<span class="fixed-width">Our majestic text</span>

.fixed-width {
    display: inline-block;  /* This duck makes our span respect width */
    width: 100px;           /* Adjustable, way better than any gym plan */
    overflow: hidden;       /* Hide any unwieldy chunk of text poking out */
    white-space: nowrap;    /* Keep those poorly behaved words in line */
}

Your <span> will now obey the width you set, thanks to the magic of display: inline-block and text will not wrap because we’re enforcing white-space: nowrap.

Quick detour: Dealing with browser incompatibilities

While crafting solutions for the web, you will frequently stumble upon bones of extinct browser versions. Inline elements like <span>, when used with display: inline-block, can behave unexpectedly in browsers long past their prime, such as older versions of Firefox. For those quirky browsers, using -moz-inline-box was an alternative. By this epoch, though, such prehistoric beasts are mostly extinct, and display: inline-block is king.

Marching text: Floats and alignment

Need your text to maintain a straight line? You can use our less appreciated but reliable friend float: left to force the subsequent content to sit next to the <span> and abide by its width. Remember: a well-behaved span can't go far without a non-breaking space ( ) to keep it company.

Padding, margins and fitments

Sometimes, we just can't afford to change our display. Memories of past traumas often linger... In these cases, you might find comfort using padding and margin to align your text. They won't enforce a strict width but can often make us feel like we're in control again (always a good feeling).

.somewhat-controlled-text {
    padding: 0 10px;   /* Horizontal padding? Paddington Bear would approve */
    margin: 0 5px;     /* Horizontal margin - keeps things spaced just right */
}

An extra wrapper or two!

In specific cases, you might want to wrap additional elements around your text. It’s like providing your "lazy animal" some extra blankets (hope you aren’t as comfortable while debugging 😉).

<span class="fixed-width">
    <span class="inner-text">Lazy animal</span>
</span>

It gives you the power to manipulate the inner text without messing with the outer <span>, preserving its fixed width.

Mastering inline-block

At times, display: inline-block may seem to bypass your width directives. This could be due to containing block constraints or interactions with neighbouring elements. Key techniques to troubleshoot and dominate these occurrences include:

Ensuring no surrounding CSS rules are overpowering your width.
In fluid layouts, consider percentages (like width: 50%;) or viewport units (like width: 100vw;).
Don't overlook the box model to understand the total space the element occupies, including padding, border, and margin.

Your pro tips toolbox

Master text alignment within your <span> with these features in your arsenal:

Apply text-align: center; on the containing element for central alignment.
Win the vertical alignment battle using the vertical-align property, especially when <span> starts hanging out with other elements.
Levitate over layout constraints using pseudo-elements like ::before and ::after.