CSS Layout How to - Show vertical text

Question

We would like to know how to show vertical text.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div {<!-- w  w w  .  j a v  a 2  s . co  m-->
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  font-size: 2em;
}

p {
  display: inline;
  -webkit-text-combine-horizontal: all;
  -moz-text-combine-horizontal: all;
  -ms-text-combine-horizontal: all;
  text-combine-horizontal: all;
}
</style>
</head>
<body>
  <div>
    <p>A</p>
    <p>AB</p>
    <p>ABC</p>
    <p>ABCD</p>
    <p>ABCDE</p>
    <p>ABCDEF</p>
    <p>ABCDEFG</p>
    <p>ABCDEFGH</p>
    <p>ABCDEFGHI</p>
    <p>ABCDEFGHIJ</p>
    <p>ABCDEFGHIJK</p>
    <p>A lot of text to fit into 1em, you think?</p>
  </div>
</body>
</html>

The code above is rendered as follows: