CSS旋转文字显示在图标

Question

我想在几个图标之间旋转文本。当我使用CSS旋转时，文本是＆＃34; over＆＃34;图标。

原貌：

HTML：

<div class="col-sm-1 col-md-1 col-lg-1 traindir">
    <i class="fa fa-arrow-up traindir-arrow"></i>
    <i class="fa fa-arrow-up traindir-arrow"></i>
    <i class="fa fa-arrow-up traindir-arrow"></i>
    <div class="traindir-text">Färdriktning</div>
    <i class="fa fa-arrow-up traindir-arrow"></i>
    <i class="fa fa-arrow-up traindir-arrow"></i>
    <i class="fa fa-arrow-up traindir-arrow"></i>
</div>

CSS：

.traindir {
  margin-top: 200px;
  font-size: 20px;
}

.traindir-text {
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -ms-transform-origin: center center 0;
  -webkit-transform-origin: center center 0;
  transform-origin: center center 0;
}

旋转后，我明白了：

我想你可以看到问题，我希望文本上方的箭头，而不是覆盖它。我尝试在CSS中更改显示，高度和宽度的属性，但这没有帮助。你有任何解决方案吗？

Answer 1

writing-mode（MDN）可能是此选项。

查看演示全场 N

.traindir {
  font-size: 20px;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="col-sm-1 col-md-1 col-lg-1 traindir">

  <i class="fa fa-arrow-down"></i>
  <i class="fa fa-arrow-down"></i> 
  <i class="fa fa-arrow-down"></i>
  <span class="traindir-text">Färdriktning</span>
  <i class="fa fa-arrow-down"></i>
  <i class="fa fa-arrow-down"></i> 
  <i class="fa fa-arrow-down"></i>
</div>

不幸的是，旋转是必要的（并且箭头向下）因为rl / lr不会反转这里的方向