I'm wanna make the letters of two words display vertically, from top to bottom and, to add a controllable space(a kind of padding-top) on the the last word.(See below image)
(In Photoshop, you obtain the above effect by pressing Shift + Enter after a letter.)
I obtained something close, but somebody might know a better solution.
My solution:
<p>Stalk Me</p> <!-- is a HTML space entity --> p { font-size : 20px; width : 28px; /* depends on font-size */ line-height : 20px; /* depends on font-size */ word-wrap : break-word; text-transform : uppercase; text-align : center; }
Live example: https://jsbin.com/sacimo/edit?html,css,output
Thank you!
The letter-spacing CSS property sets the horizontal spacing behavior between text characters.
You can do this with text-orientation: upright
and writing-mode: vertical-rl
. Add -webkit-
and -ms-
Browser vendor prefixes
if needed like this Demo
.
p {
writing-mode: vertical-rl;
text-orientation: upright;
text-transform: uppercase;
font-weight: bold;
}
<p>Stalk Me</p>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With