Vertical Text, with Horizontal Letters in CSS

Creating a vertical direction text with horizontal characters can be achieved using text-orientation & writing-mode CSS properties.

TIP : Consider using a monospace font such as Courier, Consolas, Roboto Mono etc for a better look. A monospace font contains letters / characters of equal width.

Method 1) Using text-orientation & writing-mode

With writing-mode: vertical-lr rule, content of the element will flow vertically from top to bottom.

Adding to this, text-orientation: upright will lay out individual letters horizontally.

letter-spacing CSS property can also be used to set gap between individual letters.

<div id="sample-1">SAMPLE TEXT</div>

#sample-1 {
	writing-mode: vertical-lr;
	text-orientation: upright;
}

Demo :

SAMPLE TEXT

Method 2) Using overflow-wrap

(This method is shown just for the sake of explanation. It has its limitations)

By setting a small width of the element and using overflow-wrap: break-word will cause all letters to be overflown to the next line.

Spaces will however be needed to be replaced by   symbol.

<div id="sample-2">SAMPLE&nbsp;TEXT</div>

#sample-2 {
	overflow-wrap: break-word;
	width: 15px;
}

Demo :

SAMPLE TEXT