Wie wird die Schriftgröße basierend auf der Anzahl der eingefügten Zeichen verringert?

Question

Ich versuche, die Schriftgröße auf der dynamischen Menge der Zeichen zu behandeln, wie jetzt habe ich Zeichensatz mit der Schriftgröße: 40px beim Vergrößern der Zeichen sollte die Schriftgröße innerhalb des Raumes reduziert werden.

Also das ist mein HTML-Code:

<table width="620"><tr><td width="30%"></td><td ><span style="font-size:40px; font-size: 1.8vw; font-weight:bold;">BhairavPrasadVishwanatham</span><br/><span class="text-danger" style="text-align:center;font-weight:bold;font-size:20px;">VISITOR </span><br/><span class="h4 m-t-mini">XYZ</span><span class="clearfix text-center m-t-large"></span><br/><span class="h4 m-b-mini text-center">To See:</span><br/><span class="h3 text-bold m-b-small text-center">ABC</span><td></tr><tr><td></td><td><span class="clearfix"><br/><span style="font-size:16px;">Valid Thru: 26-05-2016</span><br/><br/></td></tr><td></td></tr></table> 

Jetzt muss ich den Namen: BhairavprasadVishwanatham sollte die Schriftart entsprechend der Anzahl Zeichen wie eingegeben automatisch angepasst werden: -

, wenn ich mehr als 9 eingegeben Zeichen dann sollte die Schriftart verkleinert und die td angepasst werden.

Answer 1

eine Klasse zu Ihrer Spanne zB hinzufügen:

<span class="h3 text-bold m-b-small text-center checkSize">ABC</span><td></tr><tr><td></td><td><span class="clearfix"><br/><span style="font-size:16px;">Valid Thru: 26-05-2016</span> 

dann jquery:

$(".checkSize").each(function() { 
    if ($(this).html().length > 20) $(this)..css("font-size", '5px') 
}); 

Answer 2

Schnell schmutzig rein js Lösung

<span class="decreaseFontSize"> 
    This is your text you want to reduce 
</span> 
<script> 
var el = document.querySelector('.decreaseFontSize'); 
var text = el.innerText || el.textContent; 
var endFontSize = 40; 
if(text.length<9){ 
    endFontSize = 40; 
} 
if(text.length < 5){ 
    endFontSize = 20 
} 
... 
el.style.fontSize = endFontSize+'px'; 
</script> 

jedoch, was Sie versuchen zu erreichen ist wahrscheinlich Der Text passt immer in eine Zeile und skaliert automatisch nicht anhand der Zeichenanzahl, sondern nach der Zeichenbreite (w ist breiter als i in allen nicht monotypischen Schriftarten). Mit diesem normalen Bild könnte es nützlich werden, sagen wir, dass Text, der als SVG gespeichert wird, auf die richtige Größe geändert wird, aber Sie müssen immer noch die Breite der Buchstaben schätzen.