javascript - 如何垂直书写/显示文本？

Question

我正在尝试按照如下所述转换文本。

02比赛日

至

0
2
M
a
t
c
h
d
a
y

我的代码如下。当前结果并不像我想要的那样准确。 请建议我。

table {border-collapse:collapse;}
 td span {display:block;}
.sideways {
	-webkit-transform: rotate(90deg);	
	-moz-transform: rotate(270deg);
	-ms-transform: rotate(270deg);
	-o-transform: rotate(270deg);
	transform: rotate(270deg);
}
/*put specifics here*/
table tr:nth-of-type(1) td:nth-of-type(1) {background-color:tomato;}
table tr:nth-of-type(1) td:nth-of-type(2) {background-color:red;}
table tr:nth-of-type(1) td:nth-of-type(3) {background-color:chocolate;}
table tr:nth-of-type(1) td:nth-of-type(4) {background-color:black;}
table tr:nth-of-type(1) td:nth-of-type(5) {background-color:grey;}

<table>
  <tr>
    <td rowspan="3"><span class="sideways">O2 Matchday</span></td>
  </tr>
  <tr>
    <td>My O2 for Windows</td>
  </tr>
  <tr>
    <td colspan="2">Blipdrop</td>
    <td>My O2 for business</td>
  </tr>
  
</table>

Answer 1

你可以试试这个: http://jsfiddle.net/lotusgodkk/GCu2D/1013/

CSS:

div {
    font-size: 20px;
    width: 15px;
    overflow: hidden;
    word-break: break-all;
    text-align: center;
}

HTML:

    <div>Sample Text</div>