Adattare perfettamente il testo all’interno di un div (altezza e larghezza) senza influire sulla dimensione del div

Mi scuso in anticipo perché so che questa domanda è venuta fuori molte volte prima ma non riesco a trovare la soluzione giusta (e credetemi ne ho provati alcuni!)

Fondamentalmente è il vecchio ” Fit testo perfettamente all’interno di un div senza influenzare la dimensione del div “. E a meno che non sia un completo intorpidito, credo che i CSS non abbiano modo di farlo. Quindi quello che intendo in pratica è piuttosto che fare qualcosa del tipo:

#someDiv { font-size: 12px; } 

o…

 #someDiv { font-size: 1em; } 

… Voglio essere in grado di fare qualcosa del genere:

 #someDiv { font-size: fluid; } 

… significa che qualunque testo contenga questo div, lo ridimensiona per adattarsi perfettamente da sinistra a destra e dall’alto verso il basso senza overflow o spazi bianchi.

Dopo aver navigato attraverso innumerevoli siti web alla ricerca di questa soluzione CSS, ora ho accettato che CSS non è in grado di farlo … quindi, inserisci jQuery.

Ho trovato diverse soluzioni jQuery online, ma scaleranno il testo solo per adattarlo alla larghezza, ma voglio che riduca anche all’altezza. In modo così efficace voglio dire a jQuery:

“jQuery, trova $ (this) div e qualunque sia il testo al suo interno Voglio ridimensionarlo in modo che riempia l’intera altezza e larghezza del div il più strettamente ansible”.

Nel caso in cui non mi abbia spiegato molto bene, ho allegato un grafico che spiega il problema che sto affrontando e la soluzione che sto cercando.

Qualsiasi aiuto sarebbe molto apprezzato. Grazie.

inserisci la descrizione dell'immagine qui

Ecco la stessa risposta, ma in Javascript

 var autoSizeText; autoSizeText = function() { var el, elements, _i, _len, _results; elements = $('.resize'); console.log(elements); if (elements.length < 0) { return; } _results = []; for (_i = 0, _len = elements.length; _i < _len; _i++) { el = elements[_i]; _results.push((function(el) { var resizeText, _results1; resizeText = function() { var elNewFontSize; elNewFontSize = (parseInt($(el).css('font-size').slice(0, -2)) - 1) + 'px'; return $(el).css('font-size', elNewFontSize); }; _results1 = []; while (el.scrollHeight > el.offsetHeight) { _results1.push(resizeText()); } return _results1; })(el)); } return _results; }; $(document).ready(function() { return autoSizeText(); }); 

A proposito … se hai mai bisogno di convertire coffeescript in javascript, vai su js2coffee.org

Recentemente volevo qualcosa di simile:

 
This text won't be resized and will go out of the div.
This text will be resized and wont go out of the div.

E

 .no-resize, .resize { width: 100px; height: 50px; border: 1px solid #000; color: #000; float: left; margin-left: 10px; font-size: 15px } 

Fiddler su jsfiddle.net/mn4rr/1/ .

Non ho abbastanza reputazione per commentare la risposta accettata, quindi ho fatto una risposta. Se l’ height ha una transizione css3 su di essa le autoSizeText() e $.resizeText sopra hanno problemi. Ho creato un breve plugin jquery per risolvere questo problema.

 $.fn.resizeText = function (options) { var settings = $.extend({ maxfont: 40, minfont: 4 }, options); var style = $(' 

Per utilizzare questo plugin è sufficiente chiamare

  $(selector).resizeText(); 

Spero che questo risparmi qualcun altro in qualche tempo per la risoluzione dei problemi. Ho perso 20 minuti buoni grattandomi la testa chiedendomi perché il codice sopra causasse un loop infinito sulla mia pagina.

Ho risolto questo problema creando un plugin jQuery, è qui: http://jsfiddle.net/c9YNz/2/ (aggiornato per gestire il ridimensionamento delle windows)

Il codice per il plugin riduce il testo a 0,01em e poi lo ingrandisce per adattarlo, ecco il codice del plugin:

 $.fn.resizeText = function () { var width = $(this).innerWidth(); var height = $(this).innerHeight(); var html = $(this).html(); var newElem = $("
", { html: html, style: "display: inline-block;overflow:hidden;font-size:0.1em;padding:0;margin:0;border:0;outline:0" }); $(this).html(newElem); $.resizeText.increaseSize(10, 0.1, newElem, width, height); $(window).resize(function () { if ($.resizeText.interval) clearTimeout($.resizeText.interval) $.resizeText.interval = setTimeout(function () { elem.html(elem.find("div.createdResizeObject").first().html()); elem.resizeText(); }, 300); }); } $.resizeText = { increaseSize: function (increment, start, newElem, width, height) { var fontSize = start; while (newElem.outerWidth() <= width && newElem.outerHeight() <= height) { fontSize += increment; newElem.css("font-size", fontSize + "em"); } if (newElem.outerWidth() > width || newElem.outerHeight() > height) { fontSize -= increment; newElem.css("font-size", fontSize + "em"); if (increment > 0.1) { $.resizeText.increaseSize(increment / 10, fontSize, newElem, width, height); } } } };

Quindi se hai questo html:

 
Insert text from slipsum here.

Lo chiami così:

 $(document).ready(function () { $(".resizeText").resizeText(); }); 

Non è il modo migliore per farlo, ma è abbastanza per te andare avanti, immagino (più funziona).

Ecco una versione leggermente modificata delle risposte fornite.

Requisiti :

  1. La class che contiene il testo ha la class “ridimensiona”.
  2. contiene altezza e larghezza (%, px, qualunque cosa …)

Cosa cambia in questa versione?

  1. Ho aggiunto il ridimensionamento (vincolando l’evento ridimensionato alla funzione) autoSizeText. Questo non è l’ideale, ma se non ridimensioniamo molto, dovrebbe essere ok.
  2. Nelle versioni precedenti, il testo si stava solo riducendo. Ora prova a trovare il font più grande senza uscire dal div.

Nota:

Non pretendo che il codice sia pronto per la produzione. Ma se trovi qualcosa che puoi migliorare, per favore condividi con la community.

 var autoSizeText; autoSizeText = function () { var el, elements, _i, _len; elements = $('.resize'); if (elements.length < 0) { return; } for (_i = 0, _len = elements.length; _i < _len; _i++) { el = elements[_i]; dichoFit = function (el) { diminishText = function () { var elNewFontSize; elNewFontSize = (parseInt($(el).css('font-size').slice(0, -2)) - 1) + 'px'; return $(el).css('font-size', elNewFontSize); }; augmentText = function () { var elNewFontSize; elNewFontSize = (parseInt($(el).css('font-size').slice(0, -2)) + 1) + 'px'; return $(el).css('font-size', elNewFontSize); }; diminishText(); while (el.scrollHeight < el.offsetHeight) { augmentText(); } augmentText(); while (el.scrollHeight > el.offsetHeight) { diminishText(); } } dichoFit(el); } }; $(document).ready(function () { autoSizeText(); $(window).resize(function resizeText(){ autoSizeText() }) }); 
 .sizable{ width: 50vw; height: 50vh; border: 2px solid darkred; } 
  
I am a sizable div and I have explicit width and height.

Scusa risposta in ritardo, ma può risparmiare tempo di molti, scrivo questo codice che funziona perfettamente durante il ridimensionamento della finestra.

 function fitTextInDiv(){ if($this.find('.text-wrapper').height() > $this.find('.aligned-text').height() ){ while( $this.find('.text-wrapper').height() > $this.find('.aligned-text').height() ) { $this.find('.aligned-text').css('font-size', (parseFloat($this.find('.aligned-text').css('font-size')) + 0.1) + "px" ); } } else if($this.find('.text-wrapper').height() < $this.find('.aligned-text').height() ){ while( $this.find('.text-wrapper').height() < $this.find('.aligned-text').height() ) { $this.find('.aligned-text').css('font-size', (parseFloat($this.find('.aligned-text').css('font-size')) - 0.1) + "px" ); } } } 

Dove text-wrapper è padre e align-text è child div. Devi specificare l'altezza e la larghezza dell'elemento genitore. In ridimensionamento puoi impostare l'altezza e la larghezza dell'elemento genitore usando jquery, quindi chiama questa funzione.

Scrivo questo codice perché ho provato i miei molti plugin ma non supportano il ridimensionamento della finestra.

Ho avuto lo stesso problema e la soluzione è fondamentalmente usare javascript per controllare la dimensione del font. Controlla questo esempio su codepen:

 https://codepen.io/ThePostModernPlatonic/pen/BZKzVR 

prova a ridimensionarlo

     Documento sem título    

Because too much "light" doesn't illuminate our paths and warm us, it only blinds and burns us.

Ecco la mia versione. Questo è costruito con ES6 su un progetto React.

 export function autoSizeText(container, attempts=30) { let setChildrenToInheritFontSize = ( el ) => { el.style.fontSize = 'inherit'; _.each( el.children, (child) => { setChildrenToInheritFontSize( child ); }); }; let resizeText = (el) => { attempts--; let elNewFontSize; if( el.style.fontSize === "" || el.style.fontSize === "inherit" || el.style.fontSize === "NaN" ){ elNewFontSize = '32px'; // largest font to start with } else { elNewFontSize = (parseInt(el.style.fontSize.slice(0, -2)) - 1) + 'px'; } el.style.fontSize = elNewFontSize; // this function can crash the app, so we need to limit it if( attempts <= 0 ) { return; } if ( (el.scrollWidth > el.offsetWidth) || (el.scrollHeight > el.offsetHeight)) { resizeText(el); } }; setChildrenToInheritFontSize( container ); resizeText(container); }