Webkit轉換縮放問題

Question

面對縮放問題，如何刪除兩個span元素之間的額外空間。

我不能根據需求添加額外的標籤。 span標籤內如何解決這個問題。

span { 
    -webkit-transform-origin-x: 0%; 
    -webkit-transform-origin-y: 0%; 
} 

分裂跨度之前

<p style="margin: 0.0px 0.0px 0.0px 0.0px; "> 
     <span style="font-size: 14pt; color: #000000; letter-spacing: 0pt; text-transform: none; text-align: left; text-decoration: none; word-spacing: 1.33pt; -webkit-transform: scale(0.7,1); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); text-shadow: none; display: inline-block; white-space: nowrap ;width:auto;height:auto;">Keebler Zesta Saltine Crackers</span> 
    </p> 

分裂跨度

分裂跨度

前後截圖

<p style="margin: 0.0px 0.0px 0.0px 0.0px; "> 
     <span style="font-size: 14pt; color: #000000; letter-spacing: 0pt; text-transform: none; text-align: left; text-decoration: none; word-spacing: 1.33pt; -webkit-transform: scale(0.7,1); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); text-shadow: none; display: inline-block; white-space: nowrap ;width:auto;height:auto;">Keebler Zesta Saltine</span><span style="font-size: 14pt; color: #000000; letter-spacing: 0pt; text-transform: none; text-align: left; text-decoration: none; word-spacing: 1.33pt; -webkit-transform: scale(0.7,1); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); text-shadow: none; display: inline-block; white-space: nowrap ;width:auto;height:auto;"> Crackers</span> 
    </p> 

分裂跨度

Answer 1

使用CSS變換並不影響元素的邊框後截圖。

這就是爲什麼在佈置期間，第一個跨度仍然具有相同的寬度，就像沒有scale(0.7,1)一樣。

例如，您可以嘗試設置明確的width。或者做一些負面的margin-right魔法。

Answer 2

規模容器

p { 
 
    -webkit-transform: scale(0.7, 1); 
 
    transform: scale(0.7, 1); 
 
}

<p style="margin: 0.0px 0.0px 0.0px 0.0px; "> 
 
     <span style="font-size: 14pt; color: #000000; letter-spacing: 0pt; text-transform: none; text-align: left; text-decoration: none; word-spacing: 1.33pt; text-shadow: none; display: inline-block; white-space: nowrap ;width:auto;height:auto;">Keebler Zesta Saltine</span> 
 
     <span style="font-size: 14pt; color: #000000; letter-spacing: 0pt; text-transform: none; text-align: left; text-decoration: none; word-spacing: 1.33pt; text-shadow: none; display: inline-block; white-space: nowrap ;width:auto;height:auto;"> Crackers</span> 
 
    </p>

如果你只打算2個跨度，您可以使用一個全球範圍的容器將它們對齊，第二跨度的規模，並設置將原點轉換到左側，以便它們之間的間距不會改變。

注意，第二跨度的總規模是兩者的結合轉變

p { 
 
    font-size: 40px; 
 
    transform: scale(0.5, 1); 
 
} 
 
.test { 
 
    transform: scale(2, 1); 
 
    transform-origin: left center; 
 
    display: inline-block; 
 
}

<p> 
 
    <span>Keebler Zesta Saltine</span> 
 
    <span class="test">Crackers</span> 
 
</p>