Diminuire la grandezza del font invece che andare a capo

  • Creatore Discussione Creatore Discussione ppigna
  • Data di inizio Data di inizio

ppigna

Utente Attivo
23 Dic 2013
63
0
0
Buongiorno a tutti :)
Ho un sito, su una riga appare una frase variabile. Ce ne sono di più lunghe e di più brevi, ma quelle corte sono molte di più. Quando appare una frase lunga, mi va a capo. Come si fa a evitare ciò, riducendo la font-size se si supera un certo numero di caratteri? Grazie mille, questo è il codice:
HTML:
<body>
		<div id="ac_background" class="ac_background">
			<img class="ac_bgimage" src="images/galassia6.jpg" alt="Background"/>
			<div class="ac_overlay"></div>
			<div class="ac_loading"></div>
		</div>
		<div id="ac_content" class="ac_content">
			<h1>Ciao come va?</h1> <!-- Frase che varia in base a uno script php -->
		</div>
		<a href="#"><img src="shareicon.png" alt="Condividi" width="30" height="30" style="position:absolute; top:36%; right:47%;" /></a>
		</div>
		<div class="ac_menu2"> 
			<span class="opzione"><a href="#">About</a></span>
			<span class="barra">§</span>
			<span class="opzione"><a href="#">Nuova frase</a></span>
			<span class="barra">§</span>
			<span class="opzione"><a href="#">Suggerisci</a></span>
		</div>
 
Ecco il codice javascript che devi aggiungere alla pagina:
Codice:
<script>
window.onload = function(){
   
   var tuoValore = 20; // Qui inserisci il numero massimo di caratteri dopo il quale la font-size viene modificato

   var lunghezza = document.getElementById('ac_content').getElementsByTagName('h1')[0].innerHTML.length;
   
   // Se la parola corrente supera il massimo dei caratteri da te stabilito allora la sua font-size verrà ridotta
   if(lunghezza > tuoValore){
      document.getElementById('ac_content').getElementsByTagName('h1')[0].style.fontSize = '16px'; // Qui setti la font-size che dovrà avere la parola in px, cm, ecc..
   } 
}
</script>

Fammi sapere!! :)
 

Discussioni simili