2010-12-02 36 views
10

Cómo cambiar automáticamente el espacio entre el letters.I desea que el texto ocupa todo el ancho de la div. El texto no es estático. (Siempre cambiando el texto, puede ser 123" o 'Texto del texto' ...)CSS, llene toda la anchura del div con el texto

<style type="text/css"> 
    #menu{ 
     width: 200px; 
     background-color: #000; 
     color: #336699; 
     font-size: 16px; 
     letter-spacing: 100%; 
    } 
    </style> 
<body> 
<div id="menu"> 
    tekstas 
</div> 
+4

Sin faltar el respeto hacia el significado JamWaffles, pero en serio, ¿cómo puede una respuesta que es (inicialmente) incorrecta y ni siquiera se acercan a una solución se hace tan aceptados y 5 upvotes?! Sheesh ... –

Respuesta

11

EDIT:. Desafortunadamente esto sólo cambia palabra separación, no carta espaciamiento No hay manera de hacerlo interletraje en CSS CSS3 Posiblemente, sin embargo

Esto se logra fácilmente con el atributo text-align: justify CSS:..

#menu 
{ 
     width: 200px; 
     background-color: #000; 
     color: #336699; 
     font-size: 16px; 
     text-align: justify; 
} 
+0

justificar se ocupa del espaciado entre palabras, no espaciado entre letras – ArK

+1

¡Ooops! Mis disculpas allí. Estaba un poco apresurado con mi respuesta> bofetada < – Bojangles

+0

Además, solo afecta a las filas seguidas por otra fila. –

6

No es n o forma de hacer esto puramente con CSS. El atributo letter-spacing no toma valores de porcentaje. text-align: justify tampoco funcionará, ya que solo afecta el espacio entre palabras, no el interletraje de fuentes, y solo se aplica a aquellas filas de texto seguidas por otra fila.

Puede intentar usar JS para hacer esto contando el número de caracteres en un div particular y luego calcular el espacio necesario entre los caracteres para que complete el ancho, pero esta solución solo funcionaría correctamente con monoespaciado fuentes (fuentes que tienen el mismo ancho para todos los caracteres).

+0

¿Funcionaría 'letter-spacing' con los valores de píxel? (Es decir. La anchura del div, si no es fijo?) – Bojangles

+0

Sí, 'carta-spacing' funciona con valores de píxeles, sino que simplemente se sumará el valor declarado entre los personajes, o restar, si se le da un valor negativo. –

-2

Aquí hay una solución que no funciona para todos, pero me solucionó el problema: si está mostrando una breve cantidad de texto, puede poner un espacio entre cada carácter de cada palabra "L ikethis" .

Para mi diseño particular, esto se ve bien, y por supuesto permite align: justify hacer su magia completamente dentro del div.

Cuestiones relacionadas