如何写/垂直显示文字？

Question

我想按照如下所述来转换文本。

02比赛日

到

0 
2 
M 
a 
t 
c 
h 
d 
a 
y 

我的代码下面给出..目前的结果是不准确的，因为我想要的。 请告诉我。

table {border-collapse:collapse;} 
 
td span {display:block;} 
 
.sideways { 
 
\t -webkit-transform: rotate(90deg); \t 
 
\t -moz-transform: rotate(270deg); 
 
\t -ms-transform: rotate(270deg); 
 
\t -o-transform: rotate(270deg); 
 
\t 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> 

Answer 2

期望的结果可以通过使用

width: 10px; 
word-wrap: break-word; 

，而不是

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

这里可以实现的工作小提琴：Fiddle

- 帮助:)