Programmgesteuertes Bestimmen der Schriftgröße für einzeilige Anzeige

Question

Ich zeige Artikel auf einer Seite an. Die Artikeltitel werden manchmal auf zwei Zeilen übertragen und können sogar nur ein einziges Wort in der zweiten Zeile enthalten. Dies ist sehr unerwünscht. Wie wäre es mit jQuery/CSS am besten, eine neue Schriftgröße für die Titel programmatisch zu ermitteln, um sie auf einer Zeile zu halten?

Answer 1

Art ein Hack aber: So etwas wie dies erhalten Sie schließen. Es braucht wahrscheinlich ein wenig mehr Tweeking. Im Grunde klont es das Element und setzt den Text des Klons auf & nbsp, so dass es eine Vorstellung davon bekommt, wie hoch die Höhe einer Zeile wäre. Dann verringert es die Schriftgröße des Elements, bis es kleiner als die Zielhöhe ist.

Beachten Sie, dass Sie diese Funktion auch an die resize() der Eltern anhängen müssen.

$(document).ready(function() { 
    $(".shrink").each(function() { 
     var targetHeight = $(this).clone().html(" ").insertAfter($(this)); 

     while ($(this).height() > targetHeight.height()) { 
      $(this).css("font-size", parseInt($(this).css("font-size")) - 1); 
     } 

     targetHeight.remove(); 
    }); 
}); 

Answer 2

Ich rate nur hier - Können wir es tun, indem Sie JS verwenden, um die Höhe des Containers des Textes zu kennen und dann die Schriftgröße wenn nötig zu verringern? Ich denke, das wird die Größe der Seiteninhalte aufgrund der Änderung verändern.

Answer 3

Sie könnten einfach zählen, wie viele Zeichen im Titel sind und eine Schriftgröße darauf basierend erarbeiten. Mehr Zeichen = kleinere Schriftgröße.

Ich würde Caps auf wie groß und wie klein die Schriftgröße würde gehen dürfen, um alberne Ergebnisse obwohl zu verhindern.

Answer 4

Eine einfache Lösung wäre, ein Element direkt am Ende der Zeile zu platzieren und die Textgröße zu verringern, bis die offsetHeight korrekt ist. Zum Beispiel, wickeln Sie das Vollstopp in:

<span id="check">.</span> 

können Sie jetzt überprüfen, wo Ihre vollständigen Stillstand ist, und die Textgröße reduzieren, bis es näher an, wo man hoffte. Wenn Sie die Zeilenhöhe für diese bestimmte Phrase sehr groß festlegen, erleichtert dies die Bestimmung.

Answer 5

Das Zählen von Zeichen ist eine Lösung, aber Sie müssen die Zeichenbreite berücksichtigen. "W" ist breiter als "i", es sei denn, Sie verwenden Schriften mit fester Breite.

Außerdem Sie die Schriftart Ihrer Wahl zur Verfügung stehen wird im Client-Browser nicht garantieren kann, dass seine font-size Einstellungen gleichen ar dein sein usw.

können Sie zwei Lösungen jedoch kombinieren - erstens, approximate font-size unter Verwendung eines Character-Counting-Algorithmus, zum Beispiel - nehmen wir an, dass Zeichen eine feste Breite haben, und korrigieren Sie dann Ihre Berechnungen mit clientseitigem js, wenn js feststellt, dass die Zeile trotzdem geteilt wurde.

Es wird etwas Abstimmung benötigt, aber ich glaube, dass akzeptable Ergebnisse erzielt werden können.

Answer 6

Ich nehme an, Sie haben eine Standard-Textgröße, also setzen Sie es darauf und überprüfen Sie die offsetHeight des Elements. Wenn es offensichtlich zwei Linien ist, schrumpfen die Schriftgröße, bis die offset dramatisch um etwa 50% reduziert

Ein Beispiel mit jQuery ...

var defaultSize = 36; // if title is taller than this, it will be shrinked 

$(".articleTitle").each(function() { 
    var h = $(this).height(); 
    var i = defaultSize; 
    while(h > defaultSize) { 
    i--; 
    this.style.fontSize = i + 'px'; 
    h = $(this).height(); 
    } 
});