CSS: Imposta carattere a una dimensione modo che il testo avrebbe occupato intero contenitore

Question

Eventuali duplicati:
resize font to fit in a div (on one line)

Per una piccola flashcard creatore di app ho bisogno di impostare il tipo di carattere corretto le dimensioni in modo che il testo riempia tutta la larghezza disponibile di un contenitore di dimensioni fisse; come il testo in quattro caselle in questa immagine:

Una soluzione utilizzando PHP GD è stata fornita a this question. C'è una soluzione lato client con css o javascript a questo problema?

Answer 1

non è la forza bruta;)

HTML:

<span id="txt">Lorem</span> 
<div id="card"></div> 

CSS:

#card { 
    width: 150px; 
    height: 50px; 
    border: 1px solid black 
} 

#txt { 
    display: none 
} 

JS (utilizzando jQuery):

var size_w = (150/$('#txt').width() - 0.05); 
var size_h = (50/$('#txt').height() - 0.05); 
var size = size_w>size_h?size_h:size_w; 
$('#card').css('font-size', size + 'em'); 
$('#card').text($('#txt').text()); 

violino qui: http://jsfiddle.net/cwfDr/

Bene, ora copre sia l'altezza che la larghezza. ;)

Answer 2

Ho esaminato questo anno fa e abbiamo deciso che l'unico modo logico per farlo che non inducesse la follia era usare le immagini anziché il testo per i numeri e quindi calcolare la dimensione delle immagini necessarie in base al larghezza del contenitore (avevamo anche il testo). Inoltre, abbiamo usato un carattere a larghezza fissa selezionato per i numeri/testo.

Un'altra alternativa è il flash di sostituzione del testo, che vi dà più controllo: http://www.mikeindustries.com/blog/archive/2004/08/sifr

Ci possono essere altre tecniche che si sono sviluppate nel corso degli ultimi anni, e forse CSS3 potrebbe aiutare (anche se non può essere ampiamente supportato se lo fa), ma la tecnica dell'immagine ci ha dato il miglior botto per il dollaro.

Answer 3

Ho scritto questo piccolo, minuscolo plug-in per adattarlo alla finestra del browser.

  (function($){ 
       $.fn.extend({ 
        sizeFont: function() { 
         return this.each(function() { 
          $obj = $(this); 
          $obj.css({fontSize:($(window).width()/$obj.width())+'em'}); 
         }); 
        } 
       }); 
      })(jQuery); 

sono sicuro che è possibile modificare questo per soddisfare le vostre esigenze passando $(window) per quello che vuoi. Ecco dal vivo:

http://cullywright.com/