CODEWITHSUNDEEP
htmlcssfrontend
Marian07
Marian07

Reputation: 2582

CSS Display letters horizontally and add space between words

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)

letter-direction: vertically

(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 &nbsp; Me</p>

<!-- &nbsp; 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

Can somebody help me?

Thank you!

Upvotes: 6

Views: 1506

Answers (1)

Nenad Vracar
Nenad Vracar

Reputation: 122027

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>

Upvotes: 6

Related Questions