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

Lesezeit: 6 Minuten

Benutzeravatar von user2613399
Benutzer2613399

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.

  • Nein, es ist nicht möglich, dies nur mit CSS zu tun.

    – robertp

    14. August 2013 um 10:28 Uhr

  • Kann mir jemand eine Lösung mit js geben

    – Benutzer2613399

    14. August 2013 um 11:18 Uhr

Benutzeravatar von putvande
putvande

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>

  • Dies erfordert, dass jquery ausgeführt wird, die Operation gibt niemals jquery an.

    – ungesalzen

    5. Juni 2019 um 19:50 Uhr

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>

Benutzeravatar von Akin Hwan
Akin Hwan

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

Benutzeravatar von cfs
vgl

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

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

  • Warum nicht einen booleschen Wert anstelle von n = 1 verwenden?

    – vgl

    14. August 2013 um 12:57 Uhr

  • Was ist der Unterschied? Es ist nur eine Flagge. Schrieb das erste, was mir in den Sinn kam

    – Anonym

    14. August 2013 um 13:05 Uhr

  • Typischerweise sind Flags boolesche Werte, andernfalls kann es für jemanden, der Ihren Code liest, verwirrend sein, da eine Ganzzahl anzeigen kann, dass es mehr als zwei Zustände gibt.

    – vgl

    14. August 2013 um 13:49 Uhr

  • Oder tun while(true) und break

    – reformiert

    8. August 2019 um 17:06 Uhr

Joes Benutzeravatar
Jo

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

  1. Befreien Sie sich von der Callback-Hölle.
  2. 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;
    }
}

  • Warum nicht einen booleschen Wert anstelle von n = 1 verwenden?

    – vgl

    14. August 2013 um 12:57 Uhr

  • Was ist der Unterschied? Es ist nur eine Flagge. Schrieb das erste, was mir in den Sinn kam

    – Anonym

    14. August 2013 um 13:05 Uhr

  • Typischerweise sind Flags boolesche Werte, andernfalls kann es für jemanden, der Ihren Code liest, verwirrend sein, da eine Ganzzahl anzeigen kann, dass es mehr als zwei Zustände gibt.

    – vgl

    14. August 2013 um 13:49 Uhr

  • Oder tun while(true) und break

    – reformiert

    8. August 2019 um 17:06 Uhr

Benutzeravatar von ecairol
Ecarol

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

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

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy