Reemplazar cadenas demasiado tiempo con "..."

Question

digamos que tenemos un <div style="width:100px;">This text is too long to fit</div>

El texto en el div es dinámico. Y me gustaría forzar que el texto encaje en ancho y no se rompa. Así que necesito algún tipo de funcionalidad para probar si el texto va a caber, y si no lo está, entonces me gustaría mostrar la parte del texto que realmente encajará. Y añada ... hasta el final.

resultado de un texto demasiado largo debe ser algo como esto: "This text is..."

¿Hay alguna forma estándar de hacer lo que quiero? ¿Ya sea por javascript, jquery, jsp o java?

Gracias!

Edit: Gracias por su rápida y muchas respuestas! Estaba haciendo esto en Java adivinando cuántos caracteres encajarían. Parecía una solución menos que óptima, así que es por eso que vine aquí.

La solución CSS es perfecta para mí. No es tan importante que no funcione para Firefox, ya que todos mis clientes usan, por ejemplo, de todos modos. :)

Answer 1

que podría hacerlo con CSS3 utilizando text-overflow:ellipsishttp://www.css3.com/css-text-overflow/

o si usted insiste en el uso de la forma js, se puede envolver el texto en nodos dentro de su div y luego comparar el ancho de la envoltura con la con del padre

Answer 2

if(text.length > number_of_characters) { 
    text = text.substring(from, to); 
} 

Answer 3

text-overflow: ellipis

div { 
    text-overflow: ellipsis 
} 

será apoyado en Firefox 7 http://caniuse.com/#search=text-overflow

Answer 4

Si se agrega una etiqueta a la id div, puede utilizar document.getElementById("divid").innerHTML para obtener el contenido del div. Desde allí, puede usar .length para obtener la longitud de la cadena. Si la longitud de la cadena supera un determinado umbral, simplemente tome una subcadena y añada un "...".

Sin embargo, deberías intentar hacer esto desde el lado del servidor si puedes. Confiar en Javascript/CSS para formatearlo correctamente para el usuario es una solución menos que ideal.

Answer 5

Pruebe la propiedad CSS text-overflow.

Answer 6

si desea procesar los datos que se puede utilizar una función:

function TextAbstract(text, length) { 
    if (text == null) { 
     return ""; 
    } 
    if (text.length <= length) { 
     return text; 
    } 
    text = text.substring(0, length); 
    last = text.lastIndexOf(" "); 
    text = text.substring(0, last); 
    return text + "..."; 
} 

text = "I am not the shortest string of a short lenth with all these cows in here cows cows cows cows"; 

alert(TextAbstract(text,20)); 

EDIT: proceso de toda div con exceso de longitud en el texto:

var maxlengthwanted=20; 

    $('div').each(function(){ 
     if ($('div').text().length > maxlengthwanted) 
      $(this).text(TextAbstract($(this).text())); 
    }); 

Answer 7

Una situación más probable es que se no es posible saber cuántos caracteres encajarán en un elemento dom, dado que tiene su propia fuente, etc. CSS3 no es actualmente una opción (para mí de todos modos).Por lo tanto, creo un poco div fuera de la pantalla y mantener jamming cadenas de prueba en ella hasta que la anchura es correcta:

var text = 'Try to fit this text into 100 pixels!'; 
var max_width = 100; 

var test = document.createElement('div'); 
test.className = 'Same Class as your real element'; // give it the same font, etc as a normal button 
test.style.width = 'auto'; 
test.style.position = 'absolute'; 
test.style.left = '-2000px'; 
document.body.appendChild(test);    
test.innerHTML = text; 

if ($(test).width() > max_width) { 

    for (var i=text.length; i >= 0; i--) { 
     test.innerHTML = text.substring(0, i) + '...'; 
     if ($(test).width() <= max_width) { 
      text = text.substring(0, i) + '...'; 
      break; 
     } 
    } 
} 

document.body.removeChild(test); 

Answer 8

La manera más fácil para acortar la variable uso de JavaScript:

function truncate(string, length){ 
    if (string.length > length) 
     return string.substring(0,length)+'...'; 
    else 
     return string; 
}; 

Inspirado por esta respuesta: I want to truncate a text or line with ellipsis using JavaScript