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>

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

- 帮助：）

如何写/显示文字垂直？

2 个答案: