css - 格式化div中的垂直文本

Question

我正在尝试垂直呈现列标题文本，因此列很窄。我似乎无法让文本旋转并留在 div 中。

我做了一个快速的 jsfiddle。

https://jsfiddle.net/DaveC426914/w674sLbL/9/

我的“前期问题” 是我的演示没有正确呈现。它重复数据三次，即三个 17、三个 18 和三个 19。我不知道为什么。

(我开始使用的准系统 Angular fiddle 不包含 div ng-app="myApp" 所以我不得不添加它，否则 angular 从未应用过。我想也许这有一些东西处理它，但是删除这个 div 会破坏应用程序。)

一旦我解决了这个问题，我的真正的问题就是我无法让文本正常运行。它应该落在 100px 高、20px 窄的框内，这些框应该彼此齐平，这样他的列只有 20px 左右宽。它们呈现 100 像素宽。

<div class="table-header-cell" ng-repeat="item in headerDates">
  {{item.date}}
</div>

.table-header-cell {
    display: inline-block;
    border: 1px solid grey;
    margin: 1px 1px 5px;
    height: 30px;
    transform: rotate(-90deg);
      transform-origin: left bottom; 
    width: 100px;
}

我已经尝试过在一个 div 中嵌套一个 div，并将旋转应用到外部或内部 div 的变体。我还尝试将宽度设置为 100px，将高度设置为 20px，希望它在旋转之前应用尺寸标注，但到目前为止还没有任何组合奏效。

Answer 1

尝试将文本包装在一个内部 div 中，并对其应用转换和边距属性，而不是在单个 div 上应用所有宽度和旋转。

使用以下 html:

<div ng-app="myApp">
 <div ng-controller="MyCtrl">
  <div class="table-header-cell" ng-repeat="item in headerDates">
   <div class="innertext">
     {{item.date}}
   </div>
  </div>
 </div>
</div>

和CSS:

.table-header-cell {
display: inline-block;
border: 1px solid grey;
margin: 1px 1px 5px;
width: 30px;
height:90px;
}

.table-header-cell .innertext {
transform: rotate(-90deg);
width: 150px;
margin: 0 -60px;
}

这应该会给您希望得到的结果。

如果这对您有帮助，请标记答案并投票。谢谢