Mostrar contenido en el título al desbordamiento de texto

Question

CSS3 introduce text-overflow para que pueda ocultar el texto desbordado e incluso agregar puntos suspensivos.

Si el texto se desborda y se oculta, me gustaría mostrarlo como una información sobre herramientas cuando se coloca.

La forma más fácil de hacerlo es agregar el texto al atributo title del elemento. Sin embargo, eso hará que el texto muestre si se está desbordando o no.

Solo quiero mostrar la información sobre herramientas cuando se desborda.

así que si yo tenía esto:

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

y rendido tiene gusto de esto:

algún texto aquí

un poco más ...

La primera de ellas no tendría información sobre herramientas ya que no es necesario y el segundo tendría una información sobre herramientas que mostraba:

algo más de texto aquí

¿Hay alguna manera de configurar esto?

Answer 1

No puede hacer esto solo con CSS, y creo que cualquier solución de Javascript dependerá de cómo esté estructurado su HTML. Sin embargo, si usted tiene HTML estructurado así:

<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 el elemento #foo tener su declaración text-overflow, y la clase bar tener una declaración white-space: nowrap. El debe ser capaz de hacer algo como esto usando 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()); 
    } 
}); 

Ver: http://jsbin.com/alepa3