CSS Hiển thị chữ cái theo chiều ngang và thêm dấu cách giữa các từ

Question

Tôi muốn làm cho các chữ cái của hai từ hiển thị theo chiều dọc, từ trên xuống dưới và, để thêm không gian có thể điều khiển (một loại đệm) trên từ cuối cùng. (Xem bên dưới hình ảnh)

(Trong Photoshop, bạn có được những hiệu ứng trên bằng cách nhấn Shift + Enter sau khi một lá thư.)

---

tôi đắc một cái gì đó gần gũi, nhưng ai đó có thể biết một giải pháp tốt hơn.
Giải pháp của tôi:

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

Sống dụ: https://jsbin.com/sacimo/edit?html,css,output

---

ai đó có thể giúp tôi?

Cảm ơn bạn!

Answer 1

Bạn có thể thực hiện việc này với text-orientation: upright và writing-mode: vertical-rl. Thêm -webkit- và -ms-Browser vendor prefixes nếu cần như thế này Demo.

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

<p>Stalk Me</p>