Mostra contenuto nel titolo in caso di overflow di testo

Question

CSS3 introduce text-overflow in modo da poter nascondere il testo traboccante e persino aggiungere ellissi.

Se il testo è straripante e nascosto, vorrei mostrarlo come suggerimento quando si libra.

Il modo più semplice per eseguire questa operazione è aggiungere il testo all'attributo title dell'elemento. Tuttavia questo farà sì che il testo mostri se è straripante o meno.

Voglio solo mostrare il suggerimento quando overflow.

quindi se ho avuto questo:

<span>some text here</span> 
<span>some more text here</span> 

e resi così:

qualche testo qui

ancora un po '...

Il primo non avrebbe alcun suggerimento dato che non ce n'è bisogno e il secondo avrebbe un suggerimento che mostrava:

un po 'di testo qui

C'è un modo per impostare questa funzione?

Answer 1

Non è possibile farlo con i soli CSS, e penso che qualsiasi soluzione Javascript dipenda da come è strutturato il tuo HTML. Tuttavia, se si dispone di HTML strutturato in questo modo:

<div id="foo"> 
    <span class="bar">Lorem ipsum dolor sit amet, consectetur.</span> 
    <span class="bar">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span> 
</div> 

Con l'elemento #foo avere la vostra dichiarazione text-overflow, e la classe bar avere una dichiarazione white-space: nowrap. La si dovrebbe essere in grado di fare qualcosa di simile utilizzando jQuery:

var foo = $("#foo"); 
var max_width = foo.width(); 
foo.children().each(function() { 
    var $this = $(this); 
    if ($this.width() > max_width) { 
    $this.attr("title", $this.text()); 
    } 
}); 

See: http://jsbin.com/alepa3