Ändern Sie dynamisch die Größe der Schriftgröße basierend auf der Textlänge

Question 1

Ich muss vom Benutzer eingegebenen Text in einem Div mit fester Größe anzeigen. Ich möchte, dass die Schriftgröße automatisch so angepasst wird, dass der Text das Feld so weit wie möglich ausfüllt.

Ich möchte wahrscheinlich mit einer maximalen Schriftgröße beginnen, und während der Text zu groß ist, um in den Container zu passen, verkleinern Sie die Schriftgröße, bis er passt und die Schriftart als einzelne Zeile angezeigt werden muss.

Question 2

Angenommen, Sie haben Folgendes:

<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 kannst du so etwas machen:

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

Arbeitsprobe

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

Question 3

Basierend auf der Logik der Top-Antwort hier habe ich a erstellt No-jQuery-Version,

const input = document.querySelector('input');
const output = document.querySelector('.output');
const outputContainer = document.querySelector('.container');

function resize_to_fit() {
  let fontSize = window.getComputedStyle(output).fontSize;
  output.style.fontSize = (parseFloat(fontSize) - 1) + 'px';
  
  if(output.clientHeight >= outputContainer.clientHeight){
    resize_to_fit();
  }
}

function processInput() { 
  output.innerHTML =this.value;
  output.style.fontSize="100px"; // Default font size
  resize_to_fit();
}

input.addEventListener('input', processInput);

<input type="text" placeholder="Add text input here" style="margin: 10px; width:50%;">

<div id="outer" class="container" 
style="width:80%; height:100px; border:2px solid red; font-size:20px;">
  
<div class="output" style="word-break: break-all; word-wrap: break-word;">
</div>

</div>

Question 4

Wenn Sie mit Textlänge die Anzahl der Zeichen meinen, gibt es diesen Artikel, der auf ein kurzes Jquery-Snippet verweist. Ändern Sie die Schriftgröße dynamisch basierend auf der Anzahl der Zeichen

http://jsfiddle.net/jfbrLjt2/

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

Question 5

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

Meinen Sie mit “vom Benutzer eingegebenen Text anzeigen”, dass der Benutzer in ein Textfeld tippt? Wenn dies der Fall ist, können Sie einen Tastendruck-Listener anhängen, der die Länge des Textwerts überprüft und dann anpasst font-size entsprechend. Hier ist ein Beispiel, obwohl Sie wahrscheinlich die Längen und Schriftgrößen ändern müssen, um Ihren Anforderungen gerecht zu werden:

Arbeitsdemo

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

Question 6

<!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="https://stackoverflow.com/questions/18229230/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>

Question 7

Danke putvande, dass du mir die allgemeine Methode mitgeteilt hast. Hier ist eine verbesserte Version.

Befreien Sie sich von der Callback-Hölle.
Es wurden einige Fehler behoben, die zum Aufhängen der Seite führen können.

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

Question 8

Mit sehr wenig Javascript ist das möglich Weisen Sie eine CSS-Klasse mit der Länge zu der Zeichenfolge, zB: text-length-5 oder text-length-20

Verwenden Sie dann ausschließlich CSS, um unterschiedliche Ziele zu erreichen font-size nach diesen Klassennamen.

Es wird wahrscheinlich nicht für jeden Fall funktionieren, aber für meinen war es sehr gut, wo die maximale Länge etwa 10-12 Zeichen betrug.

Wenn Sie mehr als 100 oder 1000 Zeichen haben, können Sie auch eine Funktion erstellen, die die Länge empfängt und eine CSS-Klasse zurückgibt, und dann auf diesen Bereichen basieren.

HTML:

<div class="box">ABC</div>
<div class="box">ABCDE</div>

Javascript (jQuery, aber die gleiche Idee kann auf React oder Vanilla JS angewendet werden)

$(".box").each((i, el)=> {
  const length = $(el).text().length;
  $(el).addClass("text-length-"+length);
})

CSS:

.box {
  font-size: 16px;
}
.box.text-length-4,
.box.text-length-5,
.box.text-length-6 {
  font-size: 12px;
}