Although there are numerous inquiries regarding rotating text using CSS, I have attempted to implement the suggested solutions to my issue without success.
The objective is to design a bar graph, but in certain scenarios data points may be missing. The designer has requested an effect where the text, rotated 90 degrees counterclockwise, replaces the absent bar by forming a column.
HTML:
<li><div class="bar-missing">Results upcoming</div>
<span>Aug ’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);
}
Using this code, the "column" of text wraps into two lines, is positioned slightly to the right (should align with the x-axis label), and is too high above the x-axis, as demonstrated in this example:
https://jsfiddle.net/wvfy6zje/
If I adjust the width of div.bar-missing, the text displays on a single line, but the parent li container becomes excessively wide. Adding a class to the parent li to restrict the child div.bar-missing did not significantly improve the situation. After researching similar issues on Stack Overflow, managing heights and widths seemed challenging, prompting me to experiment with absolute positioning and negative margins without much progress.