dynamisch ändern die Größe der Schriftgröße basierend auf Textlänge mit CSS und HTML

Ich muss Benutzer eingegebenen Text in eine feste Größe div. Was ich will ist, dass die Schriftgröße automatisch angepasst wird, so dass der Text die Box so weit wie möglich füllt.dynamisch ändern die Größe der Schriftgröße basierend auf Textlänge mit CSS und HTML

Ich würde wahrscheinlich mit einer maximalen Schriftgröße beginnen und während der Text zu groß ist, um den Container zu passen, die Schriftgröße verkleinern, bis es passt und die Schriftart muss als eine einzige Zeile angezeigt werden. Ist es möglich, dies nur mit CSS und HTML zu tun?

Quelle

2013-08-14 user2613399

Nein, es ist nur mit CSS möglich. – robertp

kann jemand mir eine Lösung mit js – user2613399

Die Größe einer Textzeichenfolge in Pixeln zu ermitteln, ist eine schwierige Sache und hängt stark vom Browser und den Einstellungen des Benutzers ab. Daher wird es wahrscheinlich schwierig sein, eine Lösung zu finden, die in allen Fällen funktioniert.

Mit "Benutzer eingegebenen Text anzeigen" meinen Sie, der Benutzer tippt in ein Textfeld ein? Wenn dies der Fall ist, können Sie einen Keypress-Listener anhängen, der die Länge des Wertes des Textes überprüft und dann die font-size entsprechend anpasst. Hier ist ein Beispiel, obwohl Sie wahrscheinlich die Längen und Schriftgrößen ändern müssen, um Ihre Bedürfnisse zu erfüllen:

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'); 
    } 
});

Quelle

2013-08-14 12:40:55 cfs

bieten, was ist, wenn der Text von einer externen Quelle (Benutzer wird nicht in Box eingeben) und dieser Text muss in einem Div angezeigt werden? Wie werden wir die Textgröße kennen? – user2613399

Sieh @ putvandes Antwort, ich denke, dass könnte das sein, was näher an dem ist, was du suchst – cfs

Sagen Sie bitte dieses:

<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>

Dann sind Sie kann etwas tun wie:

$(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(); 
    } 
}

Arbeitsbeispiel

$(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>

Quelle

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>

Quelle

2013-08-14 12:47:49 Anon

warum nicht einen booleschen Wert anstelle von n = 1 verwenden? – cfs

Was ist der Unterschied? Es ist nur eine Flagge. Schrieb das erste, was Ihnen in den Sinn kam – Anon

In der Regel sind Flags boolesch, andernfalls kann es für jemanden, der Ihren Code liest, verwirrend sein, da eine ganze Zahl anzeigen kann, dass es mehr als zwei Zustände gibt. – cfs

Wer eine dynamische Funktion will, die auf der Breite des Elements abhängt (basierend auf putvande Antwort):

 $(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]]); 
       }   
      } 
     }

und die 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; 
}

Hinweis Sie font-size gesetzt innen zu erstrecken, und nicht an den äußeren div.

Quelle

2014-09-14 19:22:56 SRachamim

Danke putvande für mich die allgemeine Methode kennen zu lassen. Hier ist eine verbesserte Version.

Holen Sie sich die Rückruf-Hölle.
Behebung einiger Fehler kann zum Hängen der Seite führen.

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>

Hier ist die Funktion:

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; 
    } 
}

Quelle

2015-11-03 05:44:00 Joe

Was ist falsch mit Rekursion und wie ist diese Rückruf-Hölle? Callback-Hölle, wie ich es verstanden habe, ist normalerweise eine fast endlose 'func(). Next(). Dann(). Etc() ..' oder wirklich schwere verschachtelte anonyme Funktion vorbei ... oder? – Canis

wahrscheinlich meinte er Call-Stack, nicht Callback. Es ist nicht empfehlenswert, den Call-Stack auf unbegrenzte Zeit zu füllen, was möglicherweise einen Stapelüberlauf verursacht. – uTILLIty

@Joe Warum verwenden Sie nicht die Elemente ParentNode, sondern erwarten explizit, dass es übergeben wird? – uTILLIty

Wenn durch Textlänge Sie Zeichenzahl bedeuten, gibt es in diesem Artikel, die auf einen kurzen jquery Schnipsel zeigt 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'); 
    } 
});

Quelle

2017-10-04 19:58:17

dynamisch ändern die Größe der Schriftgröße basierend auf Textlänge mit CSS und HTML

Antwort

Verwandte Themen