Tengo el siguiente marcado:
<h5> <a href="javascript:void(0);">I am a very long title and I need to be shortened</a> </h5> ¿Cómo puedo hacer que si el texto h5 está por encima de un cierto número de caracteres, me deshago de los otros caracteres y los reemplazo con un "..."?
Esto debería funcionar. Tienes que mostrar el elemento en línea como un bloque.
Editar : me acabo de dar cuenta de que desea agregar puntos si el H5 excede una cantidad de caracteres, no si excede un ancho. Creo que para hacer eso necesitará usar JS; consulte la otra respuesta para eso.
h5 { display: block; white-space: nowrap; width: 12em; overflow: hidden; text-overflow: ellipsis; color: red; /* This needs to match the color of the anchor tag */ } a:link { color: red; } <h5> <a href="javascript:void(0);">I am a very long title and I need to be shortened</a> </h5>Puedes hacerlo:
var name = $('a').text(); if (name.length > 20) { var shortname = name.substring(0, 20) + " ..."; $('a').replaceWith(shortname); }Si desea utilizar JavaScript, puede ampliar el objeto String mediante la creación de prototipos:
String.prototype.limit = function(length) { return this.length > length ? (this.substring(0, length) + '...') : this; } var str = 'qwertyuiop'; console.log(str.limit(5)); // qwert...