Question

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

-webkit-transform: rotate(-90deg)

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

这是项目link 我想删除空间并希望它们彼此靠近并希望它们之间有5px的空间。对不起我的英语不好任何帮助都将受到高度赞赏。

Answer 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>

Answer 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

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

如何删除文本转换的空间？

2 个答案: