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

拆分 span 前的屏幕截图

拆分跨度后

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

拆分 span 后的屏幕截图

Answer 1

缩放容器

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>