2010-12-02 8 views
10

Comment modifier automatiquement l'espace entre les lettres.Je veux que le texte occupe toute la largeur de la div. Le texte n'est pas statique. (Texte changeant toujours, peut être 123" ou « texte texte » ...)CSS, remplir toute la largeur div avec du texte

<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

Aucun manque de respect signifié envers JamWaffles, mais sérieusement, comment une réponse qui est (initialement) incorrecte et qui ne se rapproche même pas d'une solution est acceptée et 5 upvotes?! Sheesh ... –

Répondre

11

EDIT:. Malheureusement, cela ne change mot espacement, non lettre d'espacement Il n'y a pas moyen de le faire crénage en CSS Peut-être CSS3, mais

Ceci est facilement accompli avec l'attribut text-align: justify CSS:..

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

justifier prend soin de l'espacement des mots pas l'espacement des lettres – ArK

+1

Oups! Mes excuses là-bas. J'ai été un peu hâtif avec ma réponse> slap < – Bojangles

+0

Aussi, cela n'affecte que les lignes qui sont suivies par une autre ligne. –

6

Il est n o façon de le faire purement avec CSS. L'attribut letter-spacing ne prend pas de valeurs en pourcentage. text-align: justify ne fonctionnera pas non plus, car il n'affecte que l'espace entre les mots, pas le crénage des polices et s'applique uniquement aux lignes de texte suivies d'une autre ligne. Vous pouvez utiliser JS pour cela en comptant le nombre de caractères dans un div particulier, puis calculer l'espace nécessaire entre les caractères afin de remplir la largeur, mais cette solution ne fonctionnerait correctement qu'avec un interligne mono polices (polices qui ont la même largeur pour tous les caractères).

+0

Est-ce que 'letter-spacing' fonctionnerait avec les valeurs de pixel? (c'est-à-dire la largeur de la div si elle est fixée?) – Bojangles

+0

Oui, 'letter-spacing' fonctionne avec les valeurs de pixel, mais il ajoutera simplement la valeur déclarée entre les caractères, ou la soustraira, si une valeur négative est donnée. –

-2

Voici une solution qui ne fonctionnera pas pour tout le monde, mais elle s'est avérée pour résoudre le problème: si vous affichez un court texte, vous pouvez mettre un espace entre chaque caractère de chaque mot "L ikethis" .

Pour ma conception particulière, cela se passe bien, et bien sûr, il permet align: justify de faire pleinement sa magie dans le div.

Questions connexes