CSS Wyświetlaj litery w poziomie i zwiększ odstępy między słowami.

Question

Chcę, aby litery dwóch słów były wyświetlane pionowo, od góry do dołu oraz, aby dodać kontrolowane miejsce (rodzaj dopełnienia) na ostatnim słowie. (Patrz poniżej obrazu)

(W programie Photoshop można uzyskać powyższy efekt, naciskając Shift + Enter po literze.)

---

uzyskałam coś blisko, ale ktoś może wiedzieć lepsze rozwiązanie.
Moje rozwiązanie:

<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; 
} 

żywo przykład: https://jsbin.com/sacimo/edit?html,css,output

---

Czy ktoś mógłby mi pomóc?

Dziękujemy!

Answer 1

Możesz to zrobić z text-orientation: upright i writing-mode: vertical-rl. Dodaj -webkit- i -ms-Browser vendor prefixes w razie potrzeby, tak jak to Demo.

p { 
 
    writing-mode: vertical-rl; 
 
    text-orientation: upright; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
}

<p>Stalk Me</p>