Discussion :

[Arsene12]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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; 
}

[Invité]

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*.... : "adapter texte au conteneur"

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

• Adapter la largeur d'un texte à la largeur d'un conteneur
• http://codepen.io/jreaux62/pen/trzEC

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

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
});

[Arsene12]

Bonjour,
merci beaucoup pour ce code qui me sera très utile à l'avenir .

[Invité]

Merci de penser à les messages qui t'ont aidé.

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#element {
    height: 50vh;
    font-size: 50vh;
    line-height: 50vh;
}

pas exactement ton besoin mais bon !