如何删除文本变换的空间？答案

【问题标题】：How to remove space of text transform?如何删除文本变换的空间？
【发布时间】：2016-04-13 01:20:12
【问题描述】：

我有一个小问题我想解决，但找不到任何好的答案：我搜索它并找到了一些使用完整的答案，但他们没有解决我的问题。我使用

-webkit-transform: rotate(-90deg)

由于添加了空间而旋转文本。现在我必须删除多余的空间。这是一个显示问题的 jsfiddle：https://jsfiddle.net/raxa/8yLwheo0/

这里是项目link 我想删除空间并希望它们彼此靠近并希望它们之间有 5px 的空间。对不起我的英语不好任何帮助将不胜感激。

【问题讨论】：

你有一个绝对位置的div，没有空格……只是放错了地方

标签： css css-transitions transform css-transforms

【解决方案1】：

我认为这是由于 .verticle_td 元素上的额外填充...只需像这样调整它：

table .Title td.verticle_td {
  padding-left: 0;
}

table .Title {
  background: #105B9D;
}
table .Title td {
  padding-right: 30px;
  padding-left: 30px;
  font-size: 18px;
  height: 260px;
  position: relative;
  top: 100px;
  color: #fff;
}
table .Title td.verticle_td {
  padding-left: 0;
}
table .Title .rank {
  transform: rotate(270deg);
  padding-left: 0px;
  padding-right: 24px;
  top: 54px;
}
table .Title .verticle-text {
  white-space: pre;
  position: absolute;
  bottom: 1.5em;
  font-size: 22px;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
table .Title .verticle_td {
  top: 35px;
}
.first_tr {
  Background: #06355D;
  border-top: 3px solid #fff;
}

<table>
  <tr class='Title'>
    <td class='rank'>RANK</td>
    <td>COMPANY NAME</td>

    <td class="verticle_td">
      <div class='verticle-text'>On Page Optimization</div>
    </td>
    <td class="verticle_td">
      <div class='verticle-text'>Off Page Optimization</div>
    </td>
    <td class="verticle_td">
      <div class='verticle-text'>Needs Analysis</div>
    </td>
    <td class="verticle_td">
      <div class='verticle-text'>Keyword Analysis</div>
    </td>
    <td class="verticle_td">
      <div class='verticle-text'>Reporting Methods</div>
    </td>
    <td class="verticle_td">
      <div class='verticle-text'>Overall Score</div>
    </td>
    <td class="verticle_td">
      <div class='verticle-text'>Change in Rank</div>
    </td>
  </tr>
</table>

【讨论】：

我已经更新了我的问题并提供了项目链接，请查看。我尝试通过上述更改，但它对我不起作用
你的项目链接没有fiddle的相同结构。小提琴有 div...你的链接项目没有。
现在你已经让所有东西都失效了。我不认为你可以旋转文本没有包装像div这样的元素。

【解决方案2】：

如果我正确理解您的意思，您需要更改您的 transform-origin，以便新原点位于元素高度的 50% 处：

table .Title .verticle-text {
    white-space: pre;
    position: absolute;
    bottom: 1.5em;
    font-size: 22px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
}

Fiddle

您当前正在围绕左上角旋转元素。以上将围绕位于左侧垂直中心的点旋转。

【讨论】：