Spacing between letters
Hello!
How can I stretch out the last word
.eighteen so it covers the width of the container?
I tried letter-spacing but then the word is moving off from text-align, and space-between and display flex did not work either.
The desired look is the bottom word "Beck" (the artists name in this design).
https://github.com/AMarlonG/Quote-by-the-artist-Beck/blob/main/assets/Beck-quote.jpg
Repo:
https://github.com/AMarlonG/Quote-by-the-artist-Beck
I'm using container-type so it only works in chromium or safari, not firefox yet.12 Replies
the only way I can think of now, would be to have each letter in its own element, and then putting
display: flex; justify-content: space-between; on the parent
you'd have to have the letters separated into spans or some other element though, it won't just work on the letters in a flex containerUnknown User•2y ago
Message Not Public
Sign In & Join Server To View
That's what I thought, yes ... 🤔
Another day, another functionality which feels like CSS should have.
But that's where progress comes in, hey.
Thank you, people! 🙌
i was wondering why it didnt work with letterspacing, but i think it should (with a magic number though, ch so it responds to font-size)
Yep! It worked, with these magic numbers:
.eighteen {
font-size: 15cqw;
letter-spacing: 3.05ch;
padding-left: 0.26ch;
} 😅
But, why does it work in a div, but not in a paragraph? Aren't both block level elements?works for me in a <p> as well,
but it is ugly af. I would still use the flex option (was just wondering)
Hmm... not for me.
Changing it to <p> the spacing get all screwed up?
Is that a thing – different internal spacing for different elements?
<div> looks B E A utiful in my browser. Haha! 😂
I thought this was ment to prevent that?
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
font: inherit;
}maybe some artifacts from lineheight or something. don't know. but if it works, it works. Sometimes strange things happen, You could try to investigate were it comes from, but it takes time and most of the time it just is what it is, without an option to correct it
Doesn't seem to be line height, but I'm good with if it works, it works for this issue. Maybe even putting the letters in <span> gives more control, but it's not dynamic content, so this is it. I'm satisfied!
Thanx! 👏