Cita:
Iniciado por furoya Y hay una que no contempla directamente el CSS ... consiste en aumentar el tamaño de la fuente hasta que la línea ocupa todo el ancho de su contenedor.
Este efecto se hacía con javascript, pero resulta que ahora sí está contemplado en CSS...3.
Código:
<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>TEXTO AJUSTA SU TAMAÑO AL DE LA CAPA.</title>
</head>
<body>
<div style="background: red; width: 70%; font-size: 7vw; resize: horizontal;
overflow: hidden; font-family: sans-serif; white-space: nowrap; text-align: center; ">
<div style="font-size: 9vw; width: 100%; background: yellow;">Foros del Web.</div>
<div style="font-size: 30vw; width: 100%; background: lime;">CSS</div>
<div style="font-size: 14vw; width: 100%; background: silver;">Unidad <code>vw</code></div>
</div>
</body>
</html>
No funciona con el resize de la propia caja, pero si redimensionan la ventana, verán como el texto se ajusta solo, siempre y cuando le den un reload al documento. Una desventaja de este método es justamente que no sigue "en tiempo real" el tamaño de los contenedores del texto, y nada más ve los valores de referencia cuando se carga la página.
Con javascript, por supuesto, no existe ese problema.
Es más, podemos hacer una pequeña trampa, y agregar una "recarga automática JS" al redimensionar, que no cambia el tamaño por programa sino que solamente hace el reload. De las medidas se sigue ocupando el CSS.
Código:
...
<body onresize="history.go(0)">
...
Un último detalle, a la fecha solamente anda en Chrome.
http://www.w3.org/TR/css3-values/#vi...lative-lengths Ajustar texto