Determinare a livello di carattere il carattere per il display a linea singola

Question

Sto visualizzando articoli su una pagina. I titoli degli articoli a volte si estendono su due righe e possono persino avere una sola parola sulla seconda riga. Questo è molto indesiderabile. Usando jQuery/CSS, quale sarebbe il metodo migliore per determinare a livello di codice una nuova dimensione font per i titoli per tenerli su una riga?

Answer 1

Genere di un hack, ma: Qualcosa di simile si arriva vicino. Probabilmente ha bisogno di un po 'più di tweeking. Fondamentalmente, clona l'elemento e imposta il testo del clone su & nbsp, in modo da avere un'idea di quale sarebbe l'altezza di una linea. Quindi diminuisce la dimensione del carattere dell'elemento finché non diventa più piccolo dell'altezza target.

Ricordare che è necessario allegare questa funzione al ridimensionamento del genitore().

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

Sto solo indovinando qui - Possiamo farlo utilizzando JS per conoscere l'altezza del contenitore del testo e quindi diminuire la dimensione del carattere se necessario? Immagino che questo introdurrà il ridimensionamento dei contenuti della pagina a causa del cambiamento.

Answer 3

Si può semplicemente contare quanti caratteri ci sono nel titolo e calcolare una dimensione del carattere basata su questo. Più caratteri = dimensione del carattere più piccola.

Metterei i tappi su quanto grande e quanto piccola sarebbe la dimensione del font, ma per evitare risultati stupidi.

Answer 4

Una soluzione semplice sarebbe quella di mettere un elemento proprio alla fine della linea e ridurre la dimensione del testo fino a quando il suo offsetHeight era corretto. Per esempio, avvolgere il pieno-stop:

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

È ora possibile controllare dove il vostro punto fermo è, e ridurre le dimensioni del testo fino a quando è più vicino a dove si sperava. Se si imposta l'altezza della linea su questa frase particolare per essere molto grande, sarebbe più facile da determinare.

Answer 5

Il conteggio dei caratteri è una soluzione, ma è necessario tenere conto della larghezza dei caratteri. "W" è più largo di "i", a meno che non utilizzi font a larghezza fissa.

Inoltre, non è possibile garantire che il carattere di vostra scelta sarà disponibile nel browser del cliente, che le sue impostazioni font-size saranno stessi tuo ar, ecc

È possibile, tuttavia, combinare due soluzioni - prima, per esempio, per dimensioni di carattere approssimative usando un algoritmo di conteggio dei caratteri, si supponga che i caratteri abbiano una larghezza fissa e quindi si correggano i calcoli con il lato client js, se js determina che la linea è stata divisa comunque.

Richiede un po 'di messa a punto, ma credo che si possano ottenere risultati accettabili.

Answer 6

Suppongo che tu abbia una dimensione di testo predefinita, quindi impostala e controlla l'offsetHeight dell'elemento. Se si tratta, ovviamente, di due linee, ridurre la dimensione del carattere fino alla offsetHeight riduce drasticamente di circa il 50%

Un esempio utilizzando 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(); 
    } 
});