Multiple Lines in a cell - Rotate Text

Question

See example: http://jsfiddle.net/1mmh7510/

As you can see a header field Test.. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. has been rotated by css .rotate

.rotate {
    height: 400px;
    white-space:nowrap;
    width: 40px;
}

.rotate > div {
    transform:
    translate(-4px, -5px)
    rotate(-90deg);
    width: 20px;
}

The content should fill all the white space in the cell in the next line if necessary. How to fix this?

Example how it should be:

Answer 1

You can use the writing-mode mixed with rotate property wich defines whether lines of text are laid out horizontally or vertically and the direction.

Support

It's supported by chrome, firefox 41, internet explorer 9, opera and safari 8

Syntax

The options are: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

.rotate {
    height: 400px;
    width: 40px;
}

.rotate > div {
    -webkit-writing-mode:vertical-rl; 
    -ms-writing-mode:tb-rl; 
    writing-mode:vertical-rl; 
  transform: rotate(-180deg)
}

<table style="background-color:#e4e6ea;" border="0" cellspacing="1">
    <tbody>
    <tr class="tableheader-row-dashboard">
        <td style="background-color:white;"width="90px"> Date</td>      
        <td style="background-color:white" width="90px">Phone No</td>
        <td style="background-color:white; vertical-align: bottom;" class="rotate" width="10px"><div>Test.. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</div></td>
    </tr>
    <tr class="tablerow-rowd">
        <td class="text">06/11/2015</td>
        <td class="text">1234567890</td>
        <td class="text">X</td>
    </tr>
    </tbody>
</table>