Diminuire la grandezza del font invece che andare a capo

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>
 

LorenzoPi

Utente Attivo
21 Gen 2014
98
0
0
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
Autore Titolo Forum Risposte Data
B Diminuire automaticamente la grandezza del font se i caratteri superano un certo numero PHP 4
F Animazione testo sito web diminuire grandezza di un testo allo scroll Javascript 0
M diminuire automaticamente grandezza input tabella Javascript 5
S Diminuire la vulnerabilità della ip Cam IP Cam e Videosorveglianza 7
P Diminuire il tempo di caricamento JOOMLA Joomla 0
S Diminuire il peso di una immagine ma non la forma Photoshop 3
S word: diminuire lo spessore del testo Windows e Software 1
R pulsanti per aumentare o diminuire velocità di una canzone Flash 7
G grandezza testo HTML e CSS 4
A [HTML] stessa grandezza campi input safari HTML e CSS 1
V grandezza carattere con HTML2PDF HTML e CSS 1
G Testo che si adatta in grandezza alle misure di un DIV: è possibile farlo? HTML e CSS 2
G Limite di "grandezza" per cui non conviene più Joomla Joomla 5
F Grandezza font automatica con slabtext Javascript 0
C visualizzazione a grandezza naturale dell immagini Javascript 0
S HTML-PHP Form grandezza varibile HTML e CSS 6
I Consiglio grandezza template Webdesign e Grafica 1
borgo italia grandezza di una foto Javascript 3
M Problema "grandezza" link e compatibilità IE: HELP! HTML e CSS 4
P Problema con apici nelle stringhe [era:Cambiare grandezza carattere con JavaScript] Javascript 3
E Popup con grandezza che si adatta Javascript 2
D nuova pagina a grandezza immagine Webdesign e Grafica 1
metalgemini Problema con grandezza di una cella... HTML e CSS 1
S UPLOAD ASP: Problemi di grandezza file? Classic ASP 6
P C# Salvare una colonna del DataGridView XML 0
G Valore del campo id maggiore di 9999 MySQL 0
shelbystudio cliente moroso: posso disattivare email e sito in attesa del pagamento? Leggi, Normative e Fisco 3
K Visualizzare del html responsive in una Webview Sviluppo app per Android 0
L Grazie del benvenuto Presentati al Forum 0
L Decisione garante italiano del 23 giugno 2022 - Google Analytics 0
M Memorizzazione temi per le diverse pagine del sito Javascript 1
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
D Visualizzazione pagina basata sul valore di un campo del database PHP 2
Barierta Testo a comparsa con passaggio del mouse Javascript 17
W Elenco dei link del file presenti in una cartella PHP 2
C Dopo chiusura del tag php la stringa html va a capo PHP 1
R Trovare la Tabella del pagamento su WooCommerce WordPress 0
R Barra del menù principale decentrata Joomla 4
L titolo del sito nella pagina di ricerca di google SEO e Posizionamento 2
A Copertura: indicizzata, non inviata nella mappa del sito XML 1
felino Stampante Epson XP-322: nessuna traccia del colore nero! Hardware 6
M Controllo del codice fiscale/partita iva PHP 11
felino [JQuery] Append dopo ultimo ul li del primo livello jQuery 2
A fread non legge il contenuto del file PHP 4
F Aggiungere automaticamente sito a home del telefono HTML e CSS 2
C Saluti a tutti gli utenti del Forum Presentati al Forum 0
S Trasferire dati sulle pagine del sito PHP 7
V [Buoni amazon]+[Itunes] legali e scontati del 25% Altri Annunci 0
Mastiff_84 Saluto a tutti i membri del forum Presentati al Forum 1
D Aumentare i sublevel del menù del theme Webdesign e Grafica 1

Discussioni simili