cambiando dinamicamente la dimensione della dimensione del carattere in base alla lunghezza del testo utilizzando css e html

Ho bisogno di visualizzare il testo inserito dall'utente in un div di dimensione fissa. Quello che voglio è che la dimensione del carattere sia regolata automaticamente in modo che il testo riempia il riquadro il più possibile.cambiando dinamicamente la dimensione della dimensione del carattere in base alla lunghezza del testo utilizzando css e html

Probabilmente vorrei iniziare con una dimensione massima del carattere e mentre il testo è troppo grande per adattarsi al contenitore, ridurre la dimensione del font finché non si adatta e il carattere deve essere visualizzato come una singola riga. È possibile farlo usando solo css e html.

fonte

2013-08-14 user2613399

No, non è possibile farlo solo con i CSS. – robertp

qualcuno può fornirmi una soluzione utilizzando js – user2613399

Ottenere la dimensione in pixel di una stringa di testo è una cosa difficile da fare e dipende molto dal browser e dalle impostazioni dell'utente, quindi sarà probabilmente difficile trovare una soluzione che funzioni in tutti i casi.

Per "visualizzare testo inserito dall'utente" si intende che l'utente sta digitando in una casella di testo? In tal caso, è possibile allegare un listener di pressione tasti che controlla la lunghezza del valore del testo, quindi regola lo font-size di conseguenza. Ecco un esempio, anche se si avrà probabilmente bisogno di cambiare le lunghezze e font-dimensioni per soddisfare le vostre esigenze:

Working Demo

$('#text').on('keypress', function(e) { 
    var that = $(this), 
     textLength = that.val().length 
    ; 

    if(textLength > 30) { 
     that.css('font-size', '5px'); 
    } else if(textLength > 20) { 
     that.css('font-size', '10px'); 
    } else if(textLength > 10) { 
     that.css('font-size', '15px'); 
    } 
});

fonte

2013-08-14 12:40:55 cfs

e se il testo è ottenuto da una fonte esterna (l'utente non inserirà una casella) e quel testo deve essere visualizzato in un div? come sapremo la dimensione del testo? – user2613399

Vedi la risposta di @ putvande, penso che potrebbe essere quello che più si avvicina a quello che stai cercando – cfs

Diciamo che avete questo:

<div id="outer" style="width:200px; height:20px; border:1px solid red;"> 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec</div> 
</div>

Poi si può fare qualcosa come:

$(document).ready(function() { 
    resize_to_fit(); 
}); 

function resize_to_fit(){ 
    var fontsize = $('div#outer div').css('font-size'); 
    $('div#outer div').css('fontSize', parseFloat(fontsize) - 1); 

    if($('div#outer div').height() >= $('div#outer').height()){ 
     resize_to_fit(); 
    } 
}

lavoro Esempio

$(document).ready(function() { 
 
    resize_to_fit(); 
 
}); 
 

 
function resize_to_fit() { 
 
    var fontsize = $('div#outer div').css('font-size'); 
 
    $('div#outer div').css('fontSize', parseFloat(fontsize) - 1); 
 

 
    if ($('div#outer div').height() >= $('div#outer').height()) { 
 
    resize_to_fit(); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="outer" style="width:200px; height:20px; border:1px solid red;"> 
 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec</div> 
 
</div>

fonte

2013-08-14 12:41:24 putvande

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <style> 
     #div1{ 
      width: 200px; 
      height: 200px; 
      font-size: 32px; 
      line-height: 1.2em; 
     } 
    </style> 
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> 
    <script> 
     $(function(){ 
      n = 1; 
      while(n==1){ 
       n = 0 
       if ($('#div1 .holder').outerHeight()>$('#div1').outerHeight()){ 
        var fz = parseInt($('#div1').css('font-size')); 
        $('#div1').css({'font-size' : fz-1}); 
        n = 1 
       } else {n = 0} 
      } 
     }); 
    </script> 
</head> 
<body> 
    <div id="div1"> 
     <div class="holder">I need to display user entered text into a fixed size div. What i want is for the font size to be automatically adjusted so that the text fills the box as much as possible. 
I'd probably want to start with a maximum font size and while the text is too big to fit the container, shrink the font size until it fits and the font must be displayed as a single line. Is it possible to do this using only css and html.</div> 
    </div> 
</body> 
</html>

fonte

2013-08-14 12:47:49 Anon

perché non usare un booleano invece di n = 1? – cfs

Qual è la differenza? È solo una bandiera. Ho scritto la prima cosa che mi è venuta in mente – Anon

In genere i flag sono booleani, altrimenti può essere fonte di confusione per qualcuno che legge il tuo codice poiché un intero potrebbe indicare che ci sono più di due stati. – cfs

Chiunque voglia una funzione dinamica che dipende dalla larghezza dell'elemento (in base alla risposta putvande):

 $(document).ready(function() { 
      var arrEl = ['div1', 'div2', 'div3']; 
      resize_to_fit(arrEl); 
     }); 

     function resize_to_fit(arr){ 
      for (var el in arr) { 
       var jEl = $('.' + arr[el] + ' span'); 
       var fontsize = jEl.css('font-size'); 
       jEl.css('fontSize', parseFloat(fontsize) - 1); 
       if (jEl.width() >= $('.' + arr[el]).width()){ 
        resize_to_fit([arr[el]]); 
       }   
      } 
     }

e la HTML:

<div class="div1"> 
    <span>Lorem Ipsum</span> 
</div> 
<br/> 
<div class="div2"> 
    <span>Lorem Ipsum 2</span> 
</div> 
<br /> 
<div class="div3"> 
    <span>Lorem Ipsum 3</span> 
</div>

whith CSS:

.div1, .div2, .div3 { 
    width: 207px; 
    white-space: nowrap; 
}

Avviso si imposta solo font-size per estendersi all'interno, e non al div esterno.

fonte

2014-09-14 19:22:56 SRachamim

Grazie a putvande per avermi fatto conoscere il metodo generale. Ecco una versione migliorata.

Sbarazzarsi dell'inferno del callback.
Risolti alcuni bug che possono causare il blocco della pagina.

Same HTML:

<div id="outer" style="width:200px; height:20px; border:1px solid red;"> 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec</div> 
</div>

Ecco la funzione:

resize_to_fit($('#outer'), $('#outer div')); 

function resize_to_fit(outer, inner) { 
    while(inner.height() > outer.height()) { 
     var fontsize = parseInt(inner.css('font-size')) - 1; 
     inner.css('font-size', fontsize); 
     // some browsers(chrome) the min font return value is 12px 
     if(fontsize <= 1 || parseInt(inner.css('font-size')) >= fontsize+1) 
      break; 
    } 
}

fonte

2015-11-03 05:44:00 Joe

cosa c'è di sbagliato con la ricorsione e come diavolo è il callback? L'inferno del callback, come ho capito, è in genere un 'func() .infinito(). Then(). Etc() ..' o una funzione anonima molto nidificata che passa ... giusto? – Canis

probabilmente voleva dire call-stack, non callback. Non è una buona pratica reclamare, poiché può riempire indefinitamente lo stack di chiamate, causando probabilmente un eccesso di stack. – uTILLIty

@Joe perché non usi gli elementi parentNode ma aspettati esplicitamente che venga passato? – uTILLIty

Se in base alla lunghezza del testo si intende conteggio dei caratteri, c'è questo articolo che fa riferimento a un frammento di breve jquery Change Font Size dynamically based on Character count

http://jsfiddle.net/jfbrLjt2/

$('.text').each(function(){ 
var el= $(this); 
    var textLength = el.html().length; 
    if (textLength > 20) { 
     el.css('font-size', '0.8em'); 
    } 
});

fonte

2017-10-04 19:58:17

cambiando dinamicamente la dimensione della dimensione del carattere in base alla lunghezza del testo utilizzando css e html

risposta

Problemi correlati