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

缩放容器

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果您只计划2个跨度，则可以使用容器的全局比例，第二个跨度的比例以及将变换原点设置为左侧以使它们之间的间距不对齐来对齐它们。变化

请注意，第二个范围的总比例是两个转换的组合

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;