Inline-Element mit CSS transform: scaleX() stauchen?

[Marika]

Hallo zusammen,

ich möchte in einem Text ein einzelnes Wort stauchen, also quasi "zusammenquetschen". Im Beispiel-Schnipsel mit dem p-Tag steht dieses innerhalb eines span-Tags. Da transform normalerweise ja nicht mit Inline-Elementen funktioniert, habe ich display: inline-block verwendet. Das funktioniert eigentlich auch. Das Wort "Beispieltext" wird gestaucht, das nächste Wort folgt aber nicht direkt als Fließtext darauf. Vielmehr scheint "Beispieltext" den gleichen Platz zu belegen wie ohne die transform-Angabe. Der blaue Rahmen - als Test - hingegen umrahmt sehr wohl "Beispieltext".

<p>
In diesem kurzem <span>Beispieltext</span> soll ein einzelnes Wort gestaucht werden.
</p>

span {
  display: inline-block;
  border: 1px solid blue;
  transform: scaleX(0.75);
  transform-origin: left;

Vielleicht kann mir da jemand weiterhelfen?

Danke schön Marika