Display text vertically

Question

I use HTML5 and want to display the string in vertical format: For example: WELCOME may display as:

W

E

L

FROM

ABOUT

M

E

Is it possible to achieve? If so, how can I do this? Note. In the example, there are two line breaks. Please avoid line breaks.

Answer 1

You can rotate the text with. But for your case, it might be better: http://www.youtube.com/watch?v=DcqmT8D_kzA#t=235

.rotate {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;

  /* Should be unset in IE9+ I think. */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

EXAMPLE: http://jsfiddle.net/cbDEK/

Answer 2

You can use word-break with a small width:

p{
    width:10px;
    word-break: break-all;
}

Jsfiddle

Answer 3

, :

.text{
    letter-spacing: 999em;
    word-break: break-all;
}