htmlcssflexbox

How to maximize the space between characters/letters in a div (like with space-between in CSS flexbox)?

I've been Googling around but haven't found a way to make the letters in a div take up all the horizontal space available and maximize the space between them dynamically (like with CSS flex space-between). Example with 3 divs:

T   H   E
Q U I C K
F   O   X

Is there a way to do this without adding each letter into their own div and straight-up using CSS flex space-between?

Solution

  • Is there a way to do this without adding each letter into their own div

    If you are willing to separate the letters by putting a space character between them, this can be done without wrapping the individual letters into additional elements, and by justifying the text content instead.

    Important to use text-align-last: justify; here, and not just text-align: justify; - the latter justifies the text in all lines of the element but the last, but here each div container contains only one line to begin with.

    div { text-align-last: justify; }
    <div>T H E</div>
<div>Q U I C K</div>
<div>F O X</div>