1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus imperdiet quam sed euismod. Morbi non ipsum orci. Donec nunc felis, pretium a sollicitudin et, tempus in nisl. Cras ut metus risus, et bibendum dui. Cras vulputate aliquet sapien non lobortis. Sed gravida sodales eleifend. Nunc commodo nunc ullamcorper urna cursus tristique. Curabitur vestibulum tortor et velit elementum eget scelerisque quam elementum. Cras sit amet dui tellus. Vestibulum sit amet velit vitae nibh congue malesuada. Suspendisse dictum, elit id cursus tempor, velit diam lobortis urna, et tincidunt nulla elit lacinia ante. Nam metus felis, sollicitudin in sollicitudin vitae, bibendum vitae sapien. Integer urna ante, malesuada sed elementum id, tincidunt pellentesque risus.
2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus imperdiet quam sed euismod. Morbi non ipsum orci. Donec nunc felis, pretium a sollicitudin et, tempus in nisl. Cras ut metus risus, et bibendum dui. Cras vulputate aliquet sapien non lobortis. Sed gravida sodales eleifend. Nunc commodo nunc ullamcorper urna cursus tristique. Curabitur vestibulum tortor et velit elementum eget scelerisque quam elementum. Cras sit amet dui tellus. Vestibulum sit amet velit vitae nibh congue malesuada. Suspendisse dictum, elit id cursus tempor, velit diam lobortis urna, et tincidunt nulla elit lacinia ante. Nam metus felis, sollicitudin in sollicitudin vitae, bibendum vitae sapien. Integer urna ante, malesuada sed elementum id, tincidunt pellentesque risus.
<!DOCTYPE html>
<html>
<head>
<title>Show vertical text in use</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
* {
margin: 0;
border: 0;
padding: 0;
color: #000;
}
#vertical_1 {
position: absolute;
z-index: -1;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
writing-mode: tb-lr;
right: 50px;
left: auto;
top: 10px;
width: 300px;
color: #000;
font: bold 16px sans-serif;
border: 1px #000 solid;
}
#vertical_2 {
position: absolute;
z-index: +1;
-webkit-transform:rotate(270deg);
-moz-transform:rotate(270deg);
-o-transform: rotate(270deg);
writing-mode: tb-rl;
left: 100px;
top: 10px;
width: 300px;
border: 1px #000 solid;
font: bold 16px sans-serif;
text-align: justify;
}
</style>
</head>
<body>
<div id="vertical_1">
<p>1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus imperdiet quam sed euismod. Morbi non ipsum orci. Donec nunc felis, pretium a sollicitudin et, tempus in nisl. Cras ut metus risus, et bibendum dui. Cras vulputate aliquet sapien non lobortis. Sed gravida sodales eleifend. Nunc commodo nunc ullamcorper urna cursus tristique. Curabitur vestibulum tortor et velit elementum eget scelerisque quam elementum. Cras sit amet dui tellus. Vestibulum sit amet velit vitae nibh congue malesuada. Suspendisse dictum, elit id cursus tempor, velit diam lobortis urna, et tincidunt nulla elit lacinia ante. Nam metus felis, sollicitudin in sollicitudin vitae, bibendum vitae sapien. Integer urna ante, malesuada sed elementum id, tincidunt pellentesque risus.</p>
</div> <!-- #verical_1 -->
<div id="vertical_2">
<p>2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus imperdiet quam sed euismod. Morbi non ipsum orci. Donec nunc felis, pretium a sollicitudin et, tempus in nisl. Cras ut metus risus, et bibendum dui. Cras vulputate aliquet sapien non lobortis. Sed gravida sodales eleifend. Nunc commodo nunc ullamcorper urna cursus tristique. Curabitur vestibulum tortor et velit elementum eget scelerisque quam elementum. Cras sit amet dui tellus. Vestibulum sit amet velit vitae nibh congue malesuada. Suspendisse dictum, elit id cursus tempor, velit diam lobortis urna, et tincidunt nulla elit lacinia ante. Nam metus felis, sollicitudin in sollicitudin vitae, bibendum vitae sapien. Integer urna ante, malesuada sed elementum id, tincidunt pellentesque risus.</p>
</div> <!-- #verical_2 -->
</body>
</html>