Kevin Powell - Community•2y ago

Equal sides with text

.gameInfo{
    text-align: center;
    font-size: 2rem;
    background: -webkit-linear-gradient(300deg, #93F5EC 20%, #A77BF3 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 2;
    padding: 0 60px;
}

.gameInfo{
    text-align: center;
    font-size: 2rem;
    background: -webkit-linear-gradient(300deg, #93F5EC 20%, #A77BF3 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 2;
    padding: 0 60px;
}

How can get a perfect rectangle of equal sides?

12 Replies

Jochem•2y ago

pretty sure you'll have to use javascript and math

glutonium•2y ago

aah what? i think more info would be better

Tenkes•2y ago

p {
  text-align: justify;
  text-justify: inter-word;
}

p {
  text-align: justify;
  text-justify: inter-word;
}

AmanOP•2y ago

yess this worked thanks a lot

Tenkes•2y ago

anytime ;)

Jochem•2y ago

oh, I thought you had a block of continuous text like your screenshot and you wanted to make sure it was as wide as it was tall

AmanOP•2y ago

that was just an example of how i wanted my paragraph to look like sorry for not being clear enough

Jochem•2y ago

the lack of spaces threw me off

glutonium•2y ago

ik justify like spreads the words to make all the lines appear the same length if I'm not wrong but what does inter word do tho

Jochem•2y ago

the same thing, but explicitly. Otherwise it's left up to the browser that could also choose to do increased inter character spacing apparently

Tenkes•2y ago

then you can use

p {
  text-justify: inter-character;
}

p {
  text-justify: inter-character;
}

which should prevent it

glutonium•2y ago

hmm got it..tnx guys

Gaming

Programming

Equal sides with text