Te damos la bienvenida a nuestro sitio web, en este sitio encontrarás la respuesta a lo que andabas buscando.
Solución:
La siguiente solución de CSS única para truncar texto en una sola línea funciona con todos los navegadores enumerados en http://www.caniuse.com en el momento de la escritura, con la excepción de Firefox 6.0. Tenga en cuenta que JavaScript es totalmente innecesario a menos que necesite admitir el ajuste de texto de varias líneas o versiones anteriores de Firefox.
.ellipsis
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
Si necesita soporte para versiones anteriores de Firefox, consulte mi respuesta a esta otra pregunta.
Tengo una solución que funciona en FF3, Safari e IE6 + con texto de una o varias líneas
.ellipsis
white-space: nowrap;
overflow: hidden;
.ellipsis.multiline
white-space: normal;
Lorem ipsum dolor sit amet, consectetur adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit
jquery.ellipsis.js
(function($)
$.fn.ellipsis = function()
return this.each(function()
var el = $(this);
if(el.css("overflow") == "hidden")
var text = el.html();
var multiline = el.hasClass('multiline');
var t = $(this.cloneNode(true))
.hide()
.css('position', 'absolute')
.css('overflow', 'visible')
.width(multiline ? el.width() : 'auto')
.height(multiline ? 'auto' : el.height())
;
el.after(t);
function height() return t.height() > el.height(); ;
function width() return t.width() > el.width(); ;
var func = multiline ? height : width;
while (text.length > 0 && func())
text = text.substr(0, text.length - 1);
t.html(text + "...");
el.html(t.html());
t.remove();
);
;
)(jQuery);
Construí este código usando varias otras publicaciones, con las siguientes mejoras:
- Utiliza una búsqueda binaria para encontrar la longitud correcta del texto.
- Maneja los casos en los que los elementos de puntos suspensivos están inicialmente ocultos mediante la configuración de un evento de presentación única que vuelve a ejecutar el código de puntos suspensivos cuando el elemento se muestra por primera vez. Esto es útil para vistas de detalles maestros o vistas de árbol en las que algunos elementos no se muestran inicialmente.
- Opcionalmente agrega un título attribute con el texto original para un efecto de desplazamiento.
- Adicional
display: blockal estilo, por lo que los tramos funcionan - Utiliza el carácter de puntos suspensivos en lugar de 3 puntos.
- Ejecuta automáticamente el script para cualquier cosa con la clase .ellipsis
CSS:
.ellipsis
white-space: nowrap;
overflow: hidden;
display: block;
.ellipsis.multiline
white-space: normal;
jquery.ellipsis.js
(function ($)
// this is a binary search that operates via a function
// func should return < 0 if it should search smaller values
// func should return > 0 if it should search larger values
// func should return = 0 if the exact value is found
// Note: this function handles multiple matches and will return the last match
// this returns -1 if no match is found
function binarySearch(length, func)
var low = 0;
var high = length - 1;
var best = -1;
var mid;
while (low <= high)
mid = ~ ~((low + high) / 2); //~~ is a fast way to convert something to an int
var result = func(mid);
if (result < 0)
high = mid - 1;
else if (result > 0)
low = mid + 1;
else
best = mid;
low = mid + 1;
return best;
// setup handlers for events for show/hide
$.each(["show", "toggleClass", "addClass", "removeClass"], function ()
//get the old function, e.g. $.fn.show or $.fn.hide
var oldFn = $.fn[this];
$.fn[this] = function ()
// get the items that are currently hidden
var hidden = this.find(":hidden").add(this.filter(":hidden"));
// run the original function
var result = oldFn.apply(this, arguments);
// for all of the hidden elements that are now visible
hidden.filter(":visible").each(function ()
// trigger the show msg
$(this).triggerHandler("show");
);
return result;
;
);
// create the ellipsis function
// when addTooltip = true, add a title attribute with the original text
$.fn.ellipsis = function (addTooltip)
return this.each(function ()
var el = $(this);
if (el.is(":visible"))
if (el.css("overflow") === "hidden")
var content = el.html();
var multiline = el.hasClass('multiline');
var tempElement = $(this.cloneNode(true))
.hide()
.css('position', 'absolute')
.css('overflow', 'visible')
.width(multiline ? el.width() : 'auto')
.height(multiline ? 'auto' : el.height())
;
el.after(tempElement);
var tooTallFunc = function ()
return tempElement.height() > el.height();
;
var tooWideFunc = function ()
return tempElement.width() > el.width();
;
var tooLongFunc = multiline ? tooTallFunc : tooWideFunc;
// if the element is too long...
if (tooLongFunc())
var tooltipText = null;
// if a tooltip was requested...
if (addTooltip)
// trim leading/trailing whitespace
// and consolidate internal whitespace to a single space
tooltipText = $.trim(el.text()).replace(/ss+/g, ' ');
var originalContent = content;
var createContentFunc = function (i)
content = originalContent.substr(0, i);
tempElement.html(content + "…");
;
var searchFunc = function (i)
createContentFunc(i);
if (tooLongFunc())
return -1;
return 0;
;
var len = binarySearch(content.length - 1, searchFunc);
createContentFunc(len);
el.html(tempElement.html());
// add the tooltip if appropriate
if (tooltipText !== null)
el.attr('title', tooltipText);
tempElement.remove();
else
// if this isn't visible, then hook up the show event
el.one('show', function ()
$(this).ellipsis(addTooltip);
);
);
;
// ellipsification for items with an ellipsis
$(document).ready(function ()
$('.ellipsis').ellipsis(true);
);
(jQuery));
No se te olvide dar visibilidad a este escrito si te fue de ayuda.
¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 3.5)