使用自动换行的CSS Tableheader旋转

Question

我已经看到了旋转的Tableheader的多个实现，并使用了这个：

 table div.rotated {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
    transform: rotate(-90deg);
    white-space: nowrap;
    width:20px;
    padding-left:5px;
    margin-top: 125px;
}

Angular2模板：

<div [class.rotated]="index != 0"><span>{{h.value}}</span></div>

然而，对于长标签，这看起来并不整洁。 有没有机会进行自动换行？

Answer 1

删除white-space: nowrap;并添加word-wrap: break-word;

＆＃13;

＆＃13;

  div.rotated {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
    transform: rotate(-90deg);
    width:50px;
    padding-left:5px;
    margin-top: 125px;
    word-wrap: break-word;
    text-align:center;

}

＆＃13;

<div class="rotated" ><span>{{h.value}}</span></div>

＆＃13;

＆＃13;

＆＃13;