[CSS] taille du texte en fonction du div

Bonjour,

Je souhaiterai modifier le font-size de mon texte à l'interieur d'un bloc div/p en fonction de la longueur du string passé dans le div/p, sachant que je dois donner par exemple à mon div une width de 100px (FIXE!!) + height de 100px (FIXE!!).

La taille du div ne doit pas changer! d'ou le soucis de CSS.

<div id="event"><p>MON EVENEMENT</p></div>

Si le texte est trop grand meme avec les valeurs:

.event {width:100px; height:100px; max-width:100px; max-height:100px;}
.event p{width:100px; height:100px; max-width:100px; max-height:100px; padding:0; margin:0;}

le div s'agrandit tout seul !

Quelque a une solution à proposer svp ?

Salut,

C'est tellement peu clair que je suis pas sur d'avoir compris. Essaye peut être du côté de la propriété overflow.

salut,

plus simple:

j'ai un div de 100x100 px qui doit etre fixe! je met du texte à l'interieur, si la chaine à l'interieur est trop longue le div s'agrandit! ce que je ne veux PAS! il doit rester à 100x100px.

Donc je dois réduire la police en fonction du texte!

Overflow ne convient pas car il me coupe une partie du texte, que j'aimerai garder en entier!
Modifié par kal (25 Feb 2010 - 12:53)

Quand tu dis "trop grand", tu parles de la longueur de la chaine ou de la taille des caractères qui posent problème ? Ou les deux ?

Normalement, overflow devrait te permettre d'avoir des ascenseurs dans ta div de 100x100px... et donc d'éviter que ton texte agrandisse les dimensions de ta div.

Mais j'avoue que je ne comprends pas exactement ce que tu veux : si le texte dépasse (et il y a 36000 façons pour que ça soit le cas : fontes plus grandes, longueur du texte, etc.), essayer de resizer la div en fonction du texte... c'est un peu une cause perdue.

Ou alors, idée à froid : faire une petite fonction en PHP qui travaille le texte qui est dedans pour le couper s'il est trop long, genre à partir de x caractères, rajouter "..." et virer le reste.

Un exemple de ton problème serait plus parlant !

quand je dis "trop long" je parle du text à l'interieur du

<div id="event"><p>TEXTE ICI</p></div>

plus le texte est grand plus le 'width' du <div></div> augmente. ex: passe de 100px à 130px => ce que je veux éviter!! je veux qu'il reste à 100px mais voir toujours la totalité du TEXTE.

L'overflow me donne un scroll, mais comme le height est de 100px et qu'il ne doit pas augmenter non plus, je voudrais que ce soit le TEXTE qui s'adapte et non le DIV!

Donc en fait si je comprends bien :
ton <div> fait toujours 100px * 100px.

tu voudrais que lorsque le texte à l'intérieur est court, sa taille s'agrandisse pour occuper tout l'espace, et si au contraire le texte est long, qu'il se réduise pour rentrer et être visible en entier, c'est bien ça ?

Je pense que c'est peut être possible avec javascript, mais je laisse les spécialistes en la matière t'éclairer sur ce point, sinon il te reste l'image, ou tu contrôleras ce que tu veux.

(Par contre je ne sais pas dans quel cadre tu veux utiliser cela, mais si tu as plusieurs blocs similaires avec des textes différents, tu n'auras aucune harmonisation de taille de texte entre les différents blocs, ce qui va poser des petits soucis d'impact visuel auprès de tes visiteurs.)
Modifié par Mikachu (25 Feb 2010 - 18:32)

C'est vrai qu'au niveau visuel après ça va poser un petit problème! mais sinon pour le principe c'est exactement ce que je recherche!

Si un connaisseur JS à la réponse je suis preneur en tout cas. Merci.

Deux choses l'une, soit tu coupes le texte s'il est trop long, cherche en Javascript du côté de

substr(position1, longueur)

Soit tu évalues la longueur de ton texte, et adapte la taille en fonction. A froid tôt le matin (il y a surement mieux, j'écris ça à l'arrache), voici l'idée, pas totalement codée :

// récupérer le contenu de ta div
var contenu = document.getElementById('ton id').innerHTML;
// à toi de voir si tu as des balises à enlever, comme le p via des substring et autres joyeusetés
...
// ensuite évaluer la longueur de ta chaine
var longueur = contenu.length;

// ensuite selon le cas
if (longueur>25){
// appliquer le style qui va bien
// et il faudrait définir un style pour réduire la taille des caractères, qqch dans le genre
document.getElementById('ton id').style.fontSize='60%';
// ATTENTION, le style ne peut que s'appliquer sur cet id unique...
}
else if (longueur>45){
        }
else if (longueur>65){
        }
// etc..

Je reste persuadé que c'est du rapiéçage... il suffit que l'utilisateur ait défini une taille de fonte plus grande que celle avec laquelle tu travailles pour que ce genre de système s'écroule. Je te conseille de limiter le raisonnement : j'ai une div de x pixels, donc le contenu va forcément tenir dedans... si tu n'as pas la maîtrise absolue sur ce qui va être mis dedans et comment ça va être visionné (et en web, c'est JAMAIS totalement le cas, lis Le Tao du web)... c'est une cause perdue.

Je te conseille plutôt de couper à partir d'un certain nombre de caractères, et de mettre une infobulle avec le texte complet, à mon sens, ça rendrait mieux.
Modifié par Nico3333fr (26 Feb 2010 - 08:42)

Oui, je suis finalement parti sur l'info bulle, car comme l'a si bien dit Mikachu l'harmonisation sera nul.

Car mon TEXTE, c'est le visiteur qui le remplira et je n'ai aucune main mise sur le contenu de celui-ci. Merci pour le lien Nico3333fr, je prendrais le temps de lire