如何刪除文本變換的空間？

我有一個小問題，我想解決，但找不到任何好的答案：我搜索了一下，發現一些使用完整的答案，但他們並沒有解決我的問題。我使用如何刪除文本變換的空間？

-webkit-transform: rotate(-90deg)

旋轉文字由於哪個空間增加了。現在我必須刪除額外的空間。這裏是顯示問題的jsfiddle：https://jsfiddle.net/raxa/8yLwheo0/

這裏是項目link 我想刪除的空間和希望，讓他們接近對方，希望爲5px的它們之間的空間。對不起，我的英語任何幫助將不勝感激。

來源

2016-01-08 raxa

你有一個絕對位置的div，沒有空格......只是在錯誤的地方 –

我想這是因爲你對.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>

來源

2016-01-08 11:23:01

我已更新我的問題，並提供項目鏈接，請採取review.I嘗試通過上述更改，但它不起作用對我來說 – raxa

你的項目鏈接沒有相同的小提琴結構。小提琴有divs ...你的鏈接項目沒有。 –

現在你已經使一切無效。我不認爲你可以旋轉文本**沒有像divs這樣的包裝元素。 –

如果我明白你的意思正確地，您需要更改您的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

您正在旋轉各地的頂級leftcorner你的元素。以上將圍繞位於左側垂直中心的點旋轉。

來源

2016-01-08 11:23:28 Turnip

如何刪除文本變換的空間？

回答

相關問題