Kann ich Text in CSS strecken? Ich möchte nicht, dass die Schrift größer ist, da sie dadurch mutiger erscheint als kleinerer Text daneben. Ich möchte den Text nur vertikal strecken, damit er irgendwie deformiert wird. Dies wäre in einem Div, und dann wäre der normale Text daneben in einem anderen Div. Wie kann ich das machen?

Ja, Sie können tatsächlich mit CSS 2D-Transformationen. Dies wird in fast allen modernen Browsern unterstützt, einschließlich IE9 +. Hier ist ein Beispiel.

HTML

<p>I feel like <span class="stretch">stretching</span>.</p>

CSS

span.stretch {
    display:inline-block;
    -webkit-transform:scale(2,1); /* Safari and Chrome */
    -moz-transform:scale(2,1); /* Firefox */
    -ms-transform:scale(2,1); /* IE 9 */
    -o-transform:scale(2,1); /* Opera */
    transform:scale(2,1); /* W3C */
}

TIPP: Möglicherweise müssen Sie Ihrem gestreckten Text einen Rand hinzufügen, um Textkollisionen zu vermeiden.

Ich werde für das horizontale Strecken von Text antworten, da die Vertikale der einfache Teil ist - verwenden Sie einfach "transform: scaleY ()"

.stretched-text {
  letter-spacing: 2px;
  display: inline-block;
  font-size: 32px;
  transform: scaleY(0.5);
  transform-origin: 0 0;
  margin-bottom: -50%;
}
span {
  font-size: 16px;
  vertical-align: top;
}

<span class="stretched-text">this is some stretched text</span>
<span>and this is some random<br />triple line <br />not stretched text</span>

Der Buchstabenabstand fügt nur Platz zwischen den Buchstaben hinzu, streckt nichts, ist aber irgendwie relativ

Inline-Block da Inline-Elemente zu restriktiv sind und der folgende Code sonst nicht funktionieren würde

Nun die Kombination, die den Unterschied macht

Schriftgröße , um die gewünschte Größe zu erreichen - auf diese Weise hat der Text wirklich die Länge, die er haben soll, und der Text davor und danach wird daneben angezeigt (scaleX dient nur zur Anzeige, der Browser sieht das Element weiterhin in seiner ursprünglichen Größe beim Positionieren anderer Elemente).

scaleY , um die Höhe des Textes so zu verringern, dass er dem Text daneben entspricht.

transform-origin , um den Text vom oberen Rand der Zeile zu skalieren.

Der untere Rand wird auf einen negativen Wert gesetzt, damit die nächste Zeile nicht weit darunter liegt - vorzugsweise in Prozent, damit die Eigenschaft für die Zeilenhöhe nicht geändert wird. vertikal ausrichten , um zu verhindern, dass der Text vorher oder nachher in andere Höhen schwebt (da der gestreckte Text eine tatsächliche Größe von 32 Pixel hat)

- Das einfache span-Element hat eine Schriftgröße, nur als Referenz.

In der Frage wurde nach einem Weg gefragt, um die Kühnheit des durch die Dehnung verursachten Textes zu verhindern, und ich habe immer noch keinen angegeben, ABER die Schriftgröße Eigenschaft hat mehr Werte als nur normal und fett .

Ich weiß, das können Sie einfach nicht sehen, aber wenn Sie nach den entsprechenden Schriftarten suchen , können Sie die mehr Werte verwenden.

Technisch gesehen nein. Sie können jedoch eine Schriftgröße verwenden, die so groß ist, wie Sie es sich für die gestreckte Schrift wünschen, und sie dann horizontal mit komprimieren font-stretch.

Die einzige Möglichkeit, die ich mir für kurze Texte wie "MENU" vorstellen kann, besteht darin, jeden einzelnen Buchstaben in eine Spanne zu setzen und sie anschließend in einem Container zu begründen. So was:

<div class="menu-burger">
  <span></span>
  <span></span>
  <span></span>
  <div>
    <span>M</span>
    <span>E</span>
    <span>N</span>
    <span>U</span>
  </div>
</div>

Und dann das CSS:

.menu-burger {
  width: 50px;
  height: 50px;
  padding: 5px;
}

...

.menu-burger > div {
  display: flex;
  justify-content: space-between;
}

CSS Font-Stretch wird jetzt in allen gängigen Browsern unterstützt (außer iOS Safari und Opera Mini). Es ist nicht einfach, eine gemeinsame Schriftfamilie zu finden, die das Erweitern von Schriftarten unterstützt, aber es ist einfach, Schriftarten zu finden, die das Verdichten unterstützen, zum Beispiel:

font-stretch: condense;
font-family: sans-serif, "Helvetica Neue", "Lucida Grande", Arial;

Ich komme immer wieder auf diese Seite zurück, wenn ein Designer eine Schrift auf mich streckt. Die akzeptierte Lösung funktioniert hervorragend, aber ich stoße häufig auf Probleme mit Margen.

Würde empfehlen, die Transformation auf der Höhe anstelle der Breite zu verwenden, wenn Sie auf Probleme stoßen, war für mich in meinem aktuellen Projekt ein Leben sicherer.

.font-stretch {
    display: inline-block;
    -webkit-transform: scale(1,.9);
    -moz-transform: scale(1,.9);
    -ms-transform: scale(1,.9);
    -o-transform: scale(1,.9);
    transform: scale(1,.9);
}