在條形圖的上下文中用於文本旋轉的CSS3變換

我知道在這裏通過CSS旋轉文本有很多問題，並且我試圖將他們的解決方案應用於我的情況，但是我一直無法獲取我的情況工作。在條形圖的上下文中用於文本旋轉的CSS3變換

我的目標是創建一個條形圖，但在某些情況下數據點丟失。設計師會喜歡一種效果，即將文本逆時針旋轉90度，形成一列代替缺失的欄。

HTML：

 <li><div class="bar-missing">Results upcoming</div> 
      <span>Aug &rsquo;15</span></li>

CSS：

 .trend-graph #bars li .bar-missing { 
     text-transform: uppercase; 
     text-align: center; 
     color: #00AEEF; 
     /* Safari */ 
     -webkit-transform: rotate(-90deg); 
     /* Firefox */ 
     -moz-transform: rotate(-90deg); 
     /* IE */ 
     -ms-transform: rotate(-90deg); 
     /* Opera */ 
     -o-transform: rotate(-90deg); 
     /* Internet Explorer */ 
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
}

利用該代碼的「列」的文本換行分成兩行，被定位有點過頭向右（應高於中心x軸標籤），並且在x軸上方太高，如在此示例中所示：

https://jsfiddle.net/wvfy6zje/

如果我更改寬度div.bar-missing，文本在一行上，但容器li變得非常寬。在集裝箱li上試圖限制孩子div.bar-missing沒有讓事情變得更好。在StackOverflow上閱讀類似的問題讓我絕望地得到任何涉及高度和寬度的解決方案，所以我也嘗試過使用絕對定位和負邊距來移動事物，但沒有取得太大的成功。

希望有人能幫助...！提前致謝！

來源

2015-04-13 TAH

添加另一個標準'變換：旋轉（-90deg）;'你的CSS ... – Xufox

新增，但問題仍然存在。不過謝謝！ – TAH

這是怎麼回事？ https://jsfiddle.net/wvfy6zje/11/

我基本上是從你的li.bar複製的佈局，以你的li.bar-blank並添加white-space:nowrap防止自動換行：

.trend-graph #amh-bars li .bar-blank { 
    text-transform: uppercase; 
    text-align: center; 
    color: #00AEEF; 
    white-space: nowrap; /* ADDED */ 
    width: 27px;   /* ADDED */ 
    margin-left: 15px; /* ADDED */ 
    position:absolute; /* ADDED */ 
    bottom:10px;   /* ADDED */ 
    transform: rotate(-90deg); 
}

來源

2015-04-13 02:08:41 sebnukem

哇，nowrap在這種情況下從來沒有發生過。非常感謝！如果我可能會要求跟進 - 設計師的模型將文本垂直居中在列中（而不是在底部對齊）。我已經玩弄了一下你的解決方案，看看我能否得到這種效果，但我回到了以前一樣的混亂狀態。你在這裏也有什麼想法嗎？再次感謝！ – TAH

在條形圖的上下文中用於文本旋轉的CSS3變換

回答

相關問題