div内の書式設定の垂直テキスト

Question

列ヘッダーテキストを垂直にレンダリングしようとしているため、列が狭いです。テキストを回転させてdiv内にとどめているように見えません。

私は素早くjsfiddleを作った。

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

マイ「前の問題」は私のデモが正しくレンダリングされていないということです。 データを3回、つまり3つの17、3の18、3の19を繰り返しています。どうしてか分かりません。

（私が始めた角膜のフィドルには、div ng-app = "myApp"が含まれていなかったので、それを追加しなければならなかったので、角度を適用しないでください。この部分を修正するとアプリが壊れます）実際の問題を解決すると、動作するテキストを取得できなくなります。それは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にローテーションを適用する方法を試しました。私はまた、 の前にの回転を適用したいと考えて、幅を100pxと高さを20pxに設定しようとしましたが、これまでの組み合わせは機能していませんでした。

Answer 1

内部divのテキストを折り返して、1つのdivのすべての幅と回転ではなく、変換と余白のプロパティを適用してみます。

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

これはあなたがうまくいけば、探している結果を与える必要があり

は、次のHTMLを使用します。

これが役立つ場合は、回答に印を付けて投票してください。ありがとう

Answer 2

角度ng-repeatの問題については、あなたのJavaScriptの負荷タイプが "Bodyで折り返しなし"であることを確認する必要があります。またAngularを2回読み込んで2番目の負荷を取り除いています。

回転の場合、コンテナを回転させるのではなく、内側のコンテナを作成して回転させます。ここで

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

を修正フィドルです：​​

は、この情報がお役に立てば幸いです。