Taille font-size relative

Version imprimable

Bonjour,

Y-a t-il moyen en CSS d'attribuer à une DIV la plus grande taille de police possible avant que son texte ne déborde.
J'aimerai dans cet exemple que mon texte "TailleMax" ait la plus grande taille possible :

https://jsfiddle.net/fhhdsamq/

Code HTML

Code:

1
2
3
4
5
<div id="global"> 
            <div id="conteneur" align="center">
                <div id="myTitle">TailleMax</div><br>
            </div>
</div>

Code CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#global { 
 position: absolute;
 top:0;    
 left:0;
 outline: none;   
 width:100%;
 height:100%;    
 margin:0;
 padding:0;
 border:0; 
 background:yellow;     
}
 
#conteneur {  
    /*position:relative;*/
    background:green;
    /*color:black; 
    /*text-align: center;*/
    width:400px;
    height:75%;    
}
 
#myTitle {  
 position:relative;
 height:50%;
 font-size: 100%;
 background:pink; 
}

Bonjour,

En CSS, non. Il faut un langage "client" (JavaScript).
En effet, il s'agit ici de comparer la longueur d'un div avec celle d'un texte, et d'ajuster la taille du texte.
Ces éléments dépendent du "client" (résolution, choix du navigateur,...).

N.B. Il me semble avoir déjà fait ça*.... : :recherch: "adapter texte au conteneur"

[EDIT] Trouvé ! 8-) (*en 2012 : j'ai encore bonne mémoire !)

Par contre, il faut modifier le script : en effet, là on adapte les espaces entre les lettres.
Dans ton cas, il faut adapter le font-size. ;)

re[EDIT] Du coup, j'ai modifié :

http://codepen.io/jreaux62/pen/bBKyrz

Code:

1
2
3
4
5
6
7
8
9
10
11
<h1 class="ajust-texte">
  <span>LA FIN DU MONDE EST POUR DEMAIN...</span>
</h1>
 
<h2 class="ajust-texte">
	<span>LA FAIM DANS LE MONDE EST POUR MAINTENANT !</span>
</h2>
 
<div class="ajust-texte">
	<span>Placidiora commeatus repente pagos vestri exsudatos si ad pagos repente.</span>
</div>

Code:

1
2
3
4
5
6
7
8
9
.ajust-texte {
  font-size: 2em;
  background: yellow;
  text-align: center;
}
.ajust-texte span {
  white-space: nowrap;
  /* on empêche le passage à la ligne */
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* Ajustement de font-size jusqu'à la longeur du conteneur */
function ajustTexteFontsize() {
  $('.ajust-texte').each(function() {
    var div = $(this);
    var txt = $(this).find('span');
    txt.css('white-space', 'nowrap'); // on empêche le passage à la ligne
    var Wdiv = div.width(); // (nombre de pixels du conteneur)
    var Wtxt = txt.width(); // (nombre de pixels du texte)
    var txtFontsize = $(this).css('font-size'); // en pixels (32px)
    txtFontsize = parseInt(txtFontsize); // numérique (32)
    if (Wtxt < Wdiv) { // si le texte est plus court que le conteneur
      while (Wtxt < Wdiv) {
        txtFontsize++;
        txt.css('font-size', txtFontsize + 'px');
        Wtxt = txt.width();
      }
      txt.css('font-size', (txtFontsize - 1) + 'px'); // on ajuste à la valeur inférieure
    } else { // si texte plus grand
      while (Wtxt > Wdiv) {
        txtFontsize--;
        txt.css('font-size', txtFontsize + 'px');
        Wtxt = txt.width();
      }
    }
  });
}
$(window).on('load resize', function() {
  ajustTexteFontsize(); // au chargement de la page + au redimensionnement de la fenêtre
});

10/12/2016, 06h13
Arsene12

Bonjour,
merci beaucoup pour ce code qui me sera très utile à l'avenir :merci:.
10/12/2016, 07h34
Invité

Merci de penser à :plusser: les messages qui t'ont aidé.
10/12/2016, 09h56
NoSmoking
Bonjour,
suivant le besoin il existe un approche qui fonctionne bien.

Exemple pour un élément qui fait la moitié de la hauteur du viewport
Code:

1 2 3 4 5 #element { height: 50vh; font-size: 50vh; line-height: 50vh; }
pas exactement ton besoin mais bon !