jQuery Taille de police CSS

Question

Comment redimensionner automatiquement la taille de police d'un <td> si le contenu passe en deuxième ligne? Je sais comment augmenter/diminuer la taille de la police en utilisant CSS et jquery mais comment faire automatiquement la taille de la police plus petite si un particulier ou tous les td avec un texte de nom de classe spécifique devient plus long que d'une ligne.

<div style="overflow: hidden;" id="parentDiv" class="scroll"> 

 

<div id="4" > 
    <table id="t4" class="Table"> 
    <tbody> 
     <tr> 
     <td id="b4" class="bY"><table id="inner1" width="100%" cellpadding="3"> 
      <tbody> 
       <tr> 
       <td class="code" id="code4" width="172"></td> 
       <td class="Num" id="Num4" width="50"></td> 
       <td colspan="2" class="Name" id="Name"></td> 
       </tr> 
       <tr> 
       <td class="code" width="172">&nbsp;</td> 
       <td>&nbsp;</td> 
       <td class="serial" width="110"></td> 
       <td class="serial" width="322"></td> 
       </tr> 
      </tbody> 
      </table></td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

Answer 1

Vous voulez .filter(). Pour la plupart des éléments cela devrait fonctionner:

$(".myClass").filter(function() 
{ 
    var el = $(this); 
    el.css("white-space", "nowrap"); 
    var lineHeight = el.height(); 
    el.css("white-space", ""); 
    return el.height() > lineHeight; 
}).css("font-size", "10pt"); 

Traiter avec des tables, toutes les cellules dans une rangée ont la même hauteur, afin de vérifier la valeur d'un élément enfant. Par exemple, envelopper tout dans un div. Toutefois, si vous devez agir sur un <td> directement:

$(function() 
{ 
    $(".myClass td").filter(function() 
    { 
     var el = $(this); 
     el.closest("tr").andSelf().css("white-space", "nowrap"); 
     var lineHeight = el.height(); 
     el.css("white-space", "normal"); 
     var textWraps = el.height() > lineHeight; 
     el.closest("tr").andSelf().css("white-space", ""); 
     return textWraps; 
    }).css("font-size", "10pt"); 
}); 

Answer 2

var newFontSize = 8 
if $('td').filter(function() { 
    return $(this).height() > 20 
}).css("font-size", newFontSize); 

Jouer à la hauteur> 20 et newFontsize pour obtenir ce que vous voulez.

Answer 3

Il n'existe pas de moyen simple d'obtenir la largeur (en pixels) du contenu du texte. Vous pouvez cependant obtenir une estimation raisonnable en multipliant le nombre de caractères par la largeur moyenne en pixels de chaque caractère - cela varie en fonction de la police, et fonctionne mieux pour les polices à largeur fixe comme Courier. Cela suppose également que tout le contenu est du texte simple sans formatage supplémentaire.

La plupart des polices ont une largeur de caractères inférieure à la hauteur, donc supposant que width = height fonctionnera définitivement.

Exemple:

var fontSize = parseInt($('.my-td-class').css('font-size')); // get default font size 

function updateFont() { 
    var e = $('#some-element'); 
    while (e.text().length * fontSize > e.width()) { 
    fontSize *= 0.8; // reduce to 80% 
    e.css('font-size', fontSize + 'px'); 
    } 
} 

Edit: D'après les autres réponses, vous pouvez appliquer cette technique à la hauteur aussi bien. Assurez-vous simplement que la comparaison largeur/hauteur reflète la taille de la police actuelle et non une valeur codée en dur.