¿Puedo estirar texto en CSS? No quiero que la fuente sea más grande, porque eso hace que parezca más audaz que el texto más pequeño al lado. Solo quiero estirar el texto verticalmente para que se deforme. Esto estaría en un div, y luego el texto normal al lado estaría en otro div. ¿Cómo puedo hacer esto?

Sí, en realidad puedes hacerlo con transformaciones CSS 2D. Esto es compatible con casi todos los navegadores modernos, incluido IE9 +. Aquí hay un ejemplo.

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

SUGERENCIA: es posible que deba agregar un margen al texto extendido para evitar colisiones de texto.

Contestaré para el estiramiento horizontal del texto, ya que la vertical es la parte fácil, solo use "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>

el espacio entre letras solo agrega espacio entre letras, no estira nada, pero es un poco relativo

bloque en línea porque los elementos en línea son demasiado restrictivos y el siguiente código no funcionaría de otra manera

Ahora la combinación que marca la diferencia

tamaño de fuente para llegar al tamaño que queremos: de esa manera el texto realmente tendrá la longitud que se supone que debe tener y el texto antes y después de aparecer junto a él (scaleX es solo para mostrar, el navegador aún ve el elemento en su tamaño original al colocar otros elementos).

scaleY para reducir la altura del texto, de modo que sea el mismo que el texto al lado.

transform-origin para hacer que el texto se escale desde la parte superior de la línea.

margen inferior establecido en un valor negativo, de modo que la siguiente línea no estará muy por debajo, preferiblemente porcentaje, para que no cambiemos la propiedad de altura de línea. alineación vertical establecida en la parte superior, para evitar que el texto anterior o posterior flote a otras alturas (ya que el texto extendido tiene un tamaño real de 32 píxeles)

- El elemento span simple tiene un tamaño de fuente, solo como referencia.

La pregunta pedía una forma de evitar la negrita del texto causada por el estiramiento y todavía no he dado uno, PERO la propiedad de peso de fuente tiene más valores que solo normal y negrita .

Lo sé, simplemente no puedes ver eso, pero si buscas las fuentes apropiadas , puedes usar más valores.

Técnicamente no. Pero lo que puede hacer es usar un tamaño de fuente que sea tan alto como le gustaría que sea la fuente estirada, y luego condensarlo horizontalmente font-stretch.

La única forma en que puedo pensar en textos cortos como "MENÚ" es poner cada letra en un lapso y luego justificarlas en un contenedor. Me gusta esto:

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

Y luego el CSS:

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

...

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

CSS font-stretch ahora es compatible con todos los principales navegadores (excepto iOS Safari y Opera Mini). No es fácil encontrar una familia de fuentes común que admita fuentes expandibles, pero es fácil encontrar fuentes que admitan la condensación, por ejemplo:

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

Siempre volviendo a esta página cuando un diseñador me estira una fuente. La solución aceptada funciona muy bien, pero con frecuencia encuentro problemas con los márgenes.

Recomendaría usar la transformación en la altura en lugar del ancho si tiene problemas, fue una vida más segura para mí en mi proyecto actual.

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