html - How to maximize the space between charactersletters in a div (like with space-between in CSS flexbox)? - Stack Overflow

admin管理员组

文章数量:1402982

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.

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.

• html
• css
• flexbox

Share Improve this question Follow edited Mar 27 at 11:57 JoseHdez_2 asked Mar 27 at 11:50 JoseHdez_2JoseHdez_2 4,22366 gold badges3030 silver badges4545 bronze badges 2

• Each word in a span and text-align: justify but I'm doubtful? Otherwise, no, there isn't. – Paulie_D Commented Mar 27 at 12:06
• 3 It wouldn't need each individual letter wrapped into a span, if you were willing to at least put a space between each letter. jsfiddle/y16ztqgn – C3roe Commented Mar 27 at 12:33

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 2

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>

Use a monospace font like Consolas for every odd line letter-spacing: 3ch and every even line letter-spacing: 0.5ch. A ch is as wide as a zero character: 0. To space vertically use line-height, the line-height in the example is 1.5ch which is the second part of this value:

:root { font: 2ch/1.5 Consolas; }

:root {
  font: 2ch/1.5 Consolas
}

div:nth-child(odd) {
  letter-spacing: 2ch;
}

div:nth-child(even) {
  letter-spacing: 0.5ch;
}

<div>THE</div>
<div>QUICK</div>
<div>FOX</div>
<div>JUMPS</div>

const text = "HELLO WORLD".split("");
 
   <div style={{ display: "flex", justifyContent: "space-between", width: "100%", fontSize: "24px", textTransform: "uppercase" }}>
      {text.map((char, index) => (
        <span key={index}>{char}</span>
      ))}
    </div>

text-justify: inter-character

CSS Text Module Level 3 defines text-justify property that

selects the justification method used [when text-align: justify is in effect].

One of its possible values is inter-character that

adjusts spacing between each pair of adjacent typographic character units (effectively varying the used letter-spacing on the line).

It it primarily intended for East Asian writing systems, but there is no reason why it shouldn't work for Latin. So it should do the trick here (*):

p {
 /*
 Justify *letters*:
 */
 text-align: justify;
 text-align-last: justify;
 text-justify: inter-character;
 /*
 Make each word occupy single line:
 */
 width: min-content;
 word-spacing: 100vw;
 /*
 This helps with hyphenated words:
 */
 word-break: keep-all;
 /*
 Unrelated effects
 */
 text-transform: uppercase;
 letter-spacing: .2ch;
 padding: .5ch;
 border: solid;
}
html { color-scheme: dark light; }

<p lang="en">The quickiestestest fox jumps</p>

Produces:

in Firefox, reportedly since version 55 (released 2017).

That's the sad part here: no other browser implemented text-justify as of 2025-04.

Keep an eye/vote on feature requests:

• Chromium issue 40321528 (2013),
• WebKit bug 99945 from (2012).

N.b., the text-justify property appears in the "International Layout in CSS" W3C draft from 1999.

---

(*) in cooperation with few more properties ensuring the "breakage to separate lines"

---

— Decades old request for text-justify?
— That's — unjustifiable!!!1!

本文标签：