如何在Angular中制作垂直文本，使其成为页面流的一部分？

Question

我想在表格单元格中使用垂直文本。但是，当我只使用样式transform: rotate(270deg)时，单元格会保留其预旋转宽度，而旋转的文本不会限制在单元格中。

是否可以使用Javascript更改表格单元格的尺寸并移动文本以使文本适合单元格并且单元格具有正确的高度和宽度？

这是一个jQuery实现，但它在换行时遇到问题，并且单元格并不总是正确调整大小或居中。在回流后多次调用fixup也不能正常工作。

$(document).ready(function() {
  var rotates = $('.fixup .rotate'),
    max = 0;

  function fixRotate() {
    rotates.each(function() {
      $this = $(this);
      var w = $this.width();
      var h = $this.height();
      var $p = $this.parent(".axle");
      var rowHeight = $p.height();
      var cellWidth = $p.width();
      $p.css('min-height', w + 'px');
      $p.css('max-height', Math.max(rowHeight, w) + 'px');
      $p.css('height', Math.max(rowHeight, w) + 'px');
      $p.css('min-width', h + 'px');
      $p.css('width', h + 'px');
      $p.css('max-width', h + 'px');
    });
  }
  fixRotate();
  setTimeout(fixRotate, 2000);
  setTimeout(fixRotate, 4000);
});

td {
  border: 1px black solid;
  padding: 6px;
  text-align: center
}
.axle {
  position: relative;
}
.rotate {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -moz-transform: rotate(-90.0deg);
  -o-transform: rotate(-90.0deg);
  -webkit-transform: rotate(-90.0deg);
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
  transform: rotate(-90.0deg);
}
.float {
  float: left;
}
.box {
  border: solid 1px grey;
}
.example {
  float: left;
  padding: 1em;
  margin: 1em;
  border: solid 1px grey;
  min-width: 5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example">
  Table, plain CSS:
  <table>
    <tr>
      <td class="axle">
        <div class='rotate'>title</div>
      </td>
      <td>B</td>
      <td class="axle">
        <div class='rotate'>this is a
          <br>three-line
          <br>cell</div>
      </td>
    </tr>
    <tr>
      <td class="axle">
        <div class='rotate'>longertitle</div>
      </td>
      <td>Great scott
        <br>this is neat</td>
      <td>H</td>
    </tr>


  </table>
</div>
<div class="example">
  Table with fixup:

  <table class="fixup">
    <tr>
      <td class="axle">
        <div class='rotate'>title</div>
      </td>
      <td>B</td>
      <td class="axle">
        <div class='rotate'>this is a
          <br>three-line
          <br>cell</div>
      </td>
    </tr>
    <tr>
      <td class="axle">
        <div class='rotate'>longertitle</div>
      </td>
      <td>Great scott
        <br>this is neat</td>
      <td>H</td>
    </tr>


  </table>
</div>
<div class="example">Table with fixup, content variation:

  <table class="fixup">
    <tr>
      <td class="axle">
        <div class='rotate'>title</div>
      </td>
      <td>B</td>
      <td class="axle">
        <div class='rotate'>this is a
          <br>three-line
          <br>cell</div>
      </td>
    </tr>
    <tr>
      <td class="axle">
        <div class='rotate'>very very long
          <br>title and breaks</div>
      </td>
      <td>Great scott
        <br>this is neat</td>
      <td>H</td>
    </tr>


  </table>
</div>

<div class="example">divs, plain css:
  <div>
    <div class="box float axle">
      <div class="rotate">testing</div>
    </div>
    <div class="box float axle">
      <div class="rotate">testing 123</div>
    </div>
    <div>meep meep</div>
  </div>
</div>

<div class="example">divs, fixup:
  <div class=fixup>
    <div class="box float axle">
      <div class="rotate">testing</div>
    </div>
    <div class="box float axle">
      <div class="rotate">testing 123</div>
    </div>
    <div>meep meep</div>
  </div>
</div>