форматирование вертикального текста в divs

Question

Я пытаюсь отобразить текст заголовка столбца вертикально, поэтому столбцы узкие. Кажется, я не могу заставить текст вращаться и оставаться внутри div.

Я сделал быстрый jsfiddle.

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

Мой «перед проблемой» в том, что моя демка правильно не делает. Он повторяет данные три раза, т. Е. Три 17, три 18 и три 19-е. Я не знаю почему.

(The скелетным Угловая скрипку я начал с не содержал Див нг-приложение = «MYAPP», так что я должен был добавить его или угловой никогда не применяется. Я думал, что, может быть, что-то делать с этим, но remving этот div ломает приложение.)

Как только я исправить это, моя реальная проблема заключается в том, что я не могу заставить текст вести себя. Он должен находиться в узких коробках шириной 100px, 20px, которые должны быть на одном уровне друг с другом, так что он составляет всего 20 пикселей или около того. Они обеспечивают ширину 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. Я также попытался установить ширину до 100 пикселей и высоту до 20 пикселей в надежде, что она применит размер до вращения, но до сих пор никакая комбинация не работала.

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

Для проблемы с угловым ng-repeat вам необходимо убедиться, что ваш тип загрузки «Без обертывания в кузове» для вашего JavaScript, также вы дважды загружали Угловое, чтобы удалить вторую нагрузку.

И для вращения вам не следует поворачивать контейнер, но создайте внутренний контейнер и поверните его.

<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/

Надеется, что это помогает.