CSS puro para hacer que el tamaño de fuente responda según la cantidad dinámica de caracteres

Sé que esto podría resolverse con bastante facilidad con JavaScript, pero solo me interesa una solución CSS pura.

Quiero una forma de cambiar el tamaño del texto dinámicamente para que siempre encaje en un div fijo. Aquí está el marcado de muestra:

<div style="width: 200px; height: 1em; overflow: hidden;">
  <p>Some sample dynamic amount of text here</p>
</div>

Expandir fragmento

Estaba pensando que tal vez esto podría ser posible especificando el ancho del contenedor en ems y haciendo que font-sizeherede ese valor.

Jan 21 '13 08:01 DMTintner

Nota: Esta solución cambia según el tamaño de la ventana gráfica y no la cantidad de contenido.

Acabo de descubrir que esto es posible usando unidades VW. Son las unidades asociadas con la configuración del ancho de la ventana gráfica. Hay algunos inconvenientes, como la falta de compatibilidad con navegadores antiguos, pero definitivamente es algo que se debe considerar seriamente. Además, aún puedes proporcionar alternativas para navegadores más antiguos como este:

p {
    font-size: 30px;
    font-size: 3.5vw;
}

http://css-tricks.com/viewport-sized-typography/ y https://medium.com/design-ux/66bddb327bb1

May 02 '2013 19:05 DMTintner

Editar: cuidado con attr() Está relacionado con calc() en CSS. Es posible que pueda lograrlo en el futuro.

Desafortunadamente, por ahora no existe una solución exclusiva para CSS. Esto es lo que te sugiero que hagas. A tu elemento dale un atributo de título. Y utilice puntos suspensivos de desbordamiento de texto para evitar roturas del diseño y permitirle al usuario saber que hay más texto allí.

<div style="width: 200px; height: 1em; text-overflow: ellipsis;" title="Some sample dynamic amount of text here">
 Some sample dynamic amount of text here
</div>

.

Alternativamente , si solo desea reducir el tamaño según la ventana gráfica. CSS3 admite nuevas dimensiones relativas al puerto de visualización.

body {
   font-size: 3.2vw;
}

3.2vw = 3.2% del ancho de la ventana gráfica
3.2vh = 3.2% de la altura de la ventana gráfica
3.2vmin = Menor que 3.2vw o 3.2vh
3.2vmax = Mayor que 3.2vw o 3.2vh, consulte css-tricks.com/.... y también consulte caniuse.com/....

Feb 24 '2014 07:02 aWebDeveloper