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>