how to write/show text vertical?

Question

i am trying to transform text according as described below.

02 Matchday

to

0
2
M
a
t
c
h
d
a
y

my codes are given below.. the current result is not accurate as i want. Kindly suggest me.

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>

Possible duplicate of [Vertical Text Direction](http://stackoverflow.com/questions/4264527/vertical-text-direction) — ozil, Dec 31 '15 at 06:47
you can wrap every character with a element and do something like this https://jsfiddle.net/39snxjok/ — Vitorino fernandes, Dec 31 '15 at 06:49

score 2 · Accepted Answer · answered Dec 31 '15 at 06:44

2

You can try this: 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>

answered Dec 31 '15 at 06:44

K K

17,794
4
30
39

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

The desired result can be achieved by using

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

instead of

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

Here is the working fiddle : Fiddle

-- Help :)

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 31 '15 at 06:43

Help

1,156
7
11

how to write/show text vertical?

2 Answers2