I’ll introduce how to achieve single-line text justification and full-width alignment using only HTML and CSS web technologies.

Background: Want to Achieve Text Justification and Full-Width Alignment with CSS Only

The completed result of single-line text justification and full-width alignment using only HTML and CSS looks like this:

⭐ https://codenote-net.github.io/sandbox/justify/index.html

Sample Code for Text Justification and Full-Width Alignment with CSS Only

CSS

.justify {
    display: flex;
    justify-content: space-between;
}

HTML

<div class="justify">
    <span>均</span>
    <span>等</span>
    <span>割</span>
    <span>付</span>
</div>

<div class="justify">
    <span>両</span>
    <span>端</span>
    <span>ぞ</span>
    <span>ろ</span>
    <span>え</span>
</div>

The sample code is published in the following GitHub Pull Request, so please take a look.

⭐ CSS だけで1行の均等割付、両端揃え · Pull Request #4 · codenote-net/sandbox

That’s all from the Gemba where I achieved single-line text justification and full-width alignment using only HTML and CSS.

Reference Information

• webでもCSSだけで1行の均等割付、両端揃え | q-Az