格式化div中的垂直文本

Question

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

内

我做了一个快速的jsfiddle。

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

我的"pre-problem"是我的演示没有正确渲染。它重复数据三次，即三个 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;
}

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

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

Answer 2

对于 angular ng-repeat 问题，您需要确保您的 JavaScript 的加载类型是 "No wrap in Body"，而且您加载了 Angular 两次，所以我删除了第二个负载。

对于旋转，您不应该旋转容器，而是创建一个内部容器并在其上旋转。

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


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

.cell {
    transform: rotate(-90deg);
    margin-left: -30px;
    margin-top: 30px;
    width: 100px;
}

这是更正后的 fiddle：https://jsfiddle.net/w674sLbL/10/

希望对您有所帮助。

格式化div中的垂直文本

formatting vertical text in divs

css

vertical-text

angularjs