0

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

我做了一个快速的jsfiddle。

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

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

（我开始的准系统 Angular 小提琴不包含div ng-app="myApp"所以我必须添加它，否则角度永远不会应用。我想这可能与它有关，但删除这个 div 会破坏应用程序。）

一旦我解决了这个问题，我真正的问题是我无法让文本表现出来。它应该在 100px 高、20px 窄的盒子内，这些盒子应该彼此齐平，所以他的列只有 20px 左右宽。他们正在渲染 100px 宽。

<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 的变体。我还尝试将宽度设置为 100 像素，将高度设置为 20 像素，希望它能在旋转之前应用尺寸标注，但到目前为止还没有任何组合起作用。

4

2 回答 2

0

尝试将文本包装在一个内部 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;
}

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

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

于 2016-10-21T23:46:34.050 回答
0

对于 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;
}

这是更正的小提琴：https ://jsfiddle.net/w674sLbL/10/

希望这可以帮助。

于 2016-10-22T00:02:08.157 回答