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
? Thanks in advance.
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>