Posso allungare il testo nei CSS? Non voglio che il carattere sia più grande, perché ciò lo rende più audace del testo più piccolo accanto ad esso. Voglio solo allungare il testo in verticale, quindi è un po 'deformato. Questo sarebbe in un div, e quindi il testo normale accanto sarebbe in un altro div. Come posso fare questo?

Sì, puoi effettivamente con CSS Trasformazioni 2D. Questo è supportato in quasi tutti i browser moderni, incluso IE9 +. Ecco un esempio

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 */
}

SUGGERIMENTO: potrebbe essere necessario aggiungere margine al testo allungato per evitare collisioni di testo.

Risponderò per lo stiramento orizzontale del testo, dato che la parte verticale è la parte facile - basta usare "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>

la spaziatura tra le lettere aggiunge solo spazio tra le lettere, non allunga nulla, ma è un po 'relativa

inline-block perché gli elementi inline sono troppo restrittivi e il codice seguente non funzionerebbe diversamente

Ora la combinazione che fa la differenza

la dimensione del carattere per raggiungere la dimensione desiderata - in questo modo il testo sarà davvero della lunghezza che dovrebbe essere e il testo prima e dopo apparirà accanto ad esso (scaleX è solo per mostrare, il browser vede ancora l'elemento alle dimensioni originali quando si posizionano altri elementi).

scaleY per ridurre l'altezza del testo, in modo che sia uguale al testo accanto ad esso.

transform-origin per rendere il testo in scala dalla parte superiore della linea.

margine inferiore impostato su un valore negativo, in modo che la riga successiva non sia molto al di sotto, preferibilmente in percentuale, in modo da non modificare la proprietà altezza della linea. allineamento verticale impostato in alto, per impedire al testo prima o dopo di fluttuare ad altre altezze (poiché il testo allungato ha una dimensione reale di 32 px)

- L'elemento span semplice ha una dimensione del carattere, solo come riferimento.

La domanda chiedeva un modo per prevenire l'audacia del testo causata dall'allungamento e non ne ho ancora dato uno, MA la proprietà peso-carattere ha più valori che normali e in grassetto .

Lo so, non puoi vederlo, ma se cerchi i caratteri appropriati , puoi usare più valori.

Tecnicamente no. Ma quello che puoi fare è usare una dimensione del carattere alta quanto vorresti che fosse il carattere allungato e quindi condensarla in orizzontale font-stretch.

L'unico modo in cui riesco a pensare a brevi testi come "MENU" è quello di mettere ogni singola lettera in un arco e giustificarle in un contenitore in seguito. Come questo:

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

E poi il CSS:

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

...

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

Il font-stretch CSS è ora supportato in tutti i principali browser (tranne iOS Safari e Opera Mini). Non è facile trovare una famiglia di caratteri comune che supporti i caratteri espandibili, ma è facile trovare caratteri che supportano la condensazione, ad esempio:

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

Tornando sempre a questa pagina quando un designer mi allunga un carattere. La soluzione accettata funziona alla grande, ma ho spesso problemi con i margini.

Consiglierei di utilizzare la trasformazione in altezza anziché in larghezza se si verificano problemi, è stata una vita più sicura per me nel mio progetto attuale.

.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);
}