让我们说，我有几列，其中一些我想旋转的值：
<div class="container">
<div class="statusColumn"><span>Normal</span></div>
<div class="statusColumn"><a>Normal</a></div>
<div class="statusColumn"><b>Rotated</b></div>
<div class="statusColumn"><abbr>Normal</abbr></div>
</div>
有了这个CSS：
.statusColumn b {
writing-mode: tb-rl;
white-space: nowrap;
display: inline-block;
overflow: visible;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
它最终看起来像这样：
是否有可能写入任何CSS，这将导致rotate元素影响其父的高度，使文本不会与其他元素重叠？这样的东西：
解决方法
使用填充的百分比和伪元素推送内容。在小提琴我离开伪元素红色显示它，你必须补偿文本的转变，但我认为这是走的路。
这个解决方案的写作可以在这里找到：http://kizu.ru/en/fun/rotated-text/
