javascript - reproducir - truncar texto con puntos suspensivos

Inserte puntos suspensivos(...) en la etiqueta HTML si el contenido es demasiado ancho

Question

Tengo una página web con un diseño elástico que cambia su ancho si se cambia el tamaño de la ventana del navegador.

En este diseño, hay titulares ( h2 ) que tendrán una longitud variable (en realidad son titulares de publicaciones de blog sobre las que no tengo control). Actualmente, si son más anchos que la ventana, se dividen en dos líneas.

¿Hay una solución elegante, probada (entre varios navegadores), por ejemplo, con jQuery, que acorta el HTML interno de esa etiqueta de título y agrega "..." si el texto sería demasiado ancho para caber en una línea en la pantalla actual / ancho del contenedor?

Answer 1

Al igual que @acSlater, no pude encontrar algo para lo que necesitaba, así que rodé el mío. Compartir en caso de que alguien más pueda usar:

Método:

ellipsisIfNecessary(mystring,maxlength); Uso:

trimmedString = ellipsisIfNecessary(mystring,50); Código y enlace de demostración: https://gist.github.com/cemerson/10368014

Answer 2

Aquí hay otra solución de JavaScript. Funciona muy bien y muy rápido.

https://github.com/dobiatowski/jQuery.FastEllipsis

Probado en Chrome, FF, IE en Windows y Mac.

Answer 3

Aquí hay una buena biblioteca de widgets / complementos en la que se han creado puntos suspensivos: http://www.codeitbetter.co.uk/widgets/ellipsis/ Todo lo que necesita hacer es hacer referencia a la biblioteca y llamar a lo siguiente:

<script type="text/javascript">
$(document).ready(function () {
$(".ellipsis_10").Ellipsis({
numberOfCharacters: 10,
showLessText: "less",
showMoreText: "more"
});
});
</script>
<div class="ellipsis_10">
Some text here that''s longer than 10 characters.
</div>

Answer 4

Bueno, una solución simple, que no agrega el "...", pero evita que la <h2> se divida en dos líneas sería agregar este bit de css:

h2 {
height:some_height_in_px; /* this is the height of the line */
overflow:hidden; /* so that the second (or third, fourth, etc.)
line is not visible */
}

Lo pensé un poco más, y se me ocurrió esta solución, tienes que envolver el contenido textual de tu etiqueta h2 con otra etiqueta (por ejemplo, un lapso) (o envolver alternativamente los h2 con algo que tenga la altura dada) y luego puede usar este tipo de javascript para filtrar las palabras innecesarias:

var elems = document.getElementById(''conainter_of_h2s'').
getElementsByTagName(''h2'');
for ( var i = 0, l = elems.length; i < l; i++) {
var span = elems.item(i).getElementsByTagName(''span'')[0];
if ( span.offsetHeight > elems.item(i).offsetHeight ) {
var text_arr = span.innerHTML.split('' '');
for ( var j = text_arr.length - 1; j>0 ; j--) {
delete text_arr[j];
span.innerHTML = text_arr.join('' '') + ''...'';
if ( span.offsetHeight <=
elems.item(i).offsetHeight ){
break;
}
}
}
}

Answer 5

Construí este código usando varias otras publicaciones, con las siguientes mejoras:

1. Utiliza una búsqueda binaria para encontrar la longitud del texto que sea correcta.
2. Maneja casos donde los elementos de puntos suspensivos se ocultan inicialmente al configurar un evento de un solo evento 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 donde algunos elementos no se muestran inicialmente.
3. Opcionalmente, agrega un atributo de título con el texto original para un efecto de hoverover.
4. display: block agregada display: block el estilo, por lo que abarca el trabajo
5. Utiliza el carácter de puntos suspensivos en lugar de 3 puntos.
6. 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(//s/s+/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));

Answer 6

De hecho, hay una manera bastante sencilla de hacerlo en CSS explotando el hecho de que IE extiende esto con no estándares y FF soporta :after

También puede hacer esto en JS si lo desea, inspeccionando el desplazamiento del objetivo y comparándolo con el ancho de sus padres, pero esto es menos sólido.

Editar: esto es aparentemente más desarrollado de lo que pensaba. El soporte de CSS3 puede existir pronto, y algunas extensiones imperfectas están disponibles para que lo pruebe.

• http://www.css3.info/preview/text-overflow/
• http://ernstdehaan.blogspot.com/2008/10/ellipsis-in-all-modern-browsers.html

Esa última es buena lectura.

Answer 7

El plugin de trunk8 jQuery admite múltiples líneas y puede usar cualquier html, no solo caracteres elípticos, para el sufijo de truncamiento: https://github.com/rviscomi/trunk8

Demostración aquí: http://jrvis.com/trunk8/

Answer 8

En caso de que terminen aquí en 2013, aquí hay un enfoque de CSS puro que encontré aquí: http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Funciona bien.

Answer 9

Es similar a la de Alex pero lo hace en tiempo de registro en lugar de lineal, y toma un parámetro maxHeight.

jQuery.fn.ellipsis = function(text, maxHeight) {
var element = $(this);
var characters = text.length;
var step = text.length / 2;
var newText = text;
while (step > 0) {
element.html(newText);
if (element.outerHeight() <= maxHeight) {
if (text.length == newText.length) {
step = 0;
} else {
characters += step;
newText = text.substring(0, characters);
}
} else {
characters -= step;
newText = newText.substring(0, characters);
}
step = parseInt(step / 2);
}
if (text.length > newText.length) {
element.html(newText + "...");
while (element.outerHeight() > maxHeight && newText.length >= 1) {
newText = newText.substring(0, newText.length - 1);
element.html(newText + "...");
}
}
};

Answer 10

HAGA EL ELLIPSIS USANDO SOLAMENTE CSS

<html>
<head>
<style type="text/css">
#ellipsisdiv {
width:200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div id="ellipsisdiv">
This content is more than 200px and see how the the ellipsis comes at the end when the content width exceeds the div width.
</div>
</body>
</html>

* Este código funciona en la mayoría de los navegadores actuales. Si tiene algún problema con Opera e IE (que probablemente no lo hará), agréguelos en el estilo:

-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;

* Esta característica es parte de CSS3. Su sintaxis completa es:

text-overflow: clip|ellipsis|string;

Answer 11

Hay una solución jQuery simple por Devon Govett :

https://gist.github.com/digulla/5796047

Para usar, simplemente llame a ellipsis () en un objeto jQuery. Por ejemplo:

$ ("span"). ellipsis ();

Answer 12

Hay una solución para texto de líneas múltiples con CSS puro. Se llama line-clamp , pero solo funciona en navegadores webkit. Sin embargo, hay una forma de imitar esto en todos los navegadores modernos (todo más reciente que IE8). Además, solo funcionará en fondos sólidos porque necesita una imagen de fondo para ocultar las últimas palabras de la última línea. Así es como funciona:

Dado este html:

<p class="example" id="example-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Aquí está el CSS:

p {
position:relative;
line-height:1.4em;
height:4.2em; /* 3 times the line-height to show 3 lines */
}
p::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
background:url(ellipsis_bg.png) repeat-y;
}

ellipsis_bg.png es una imagen del mismo color de fondo, que tendría unos 100 píxeles de ancho y tendría la misma altura que la altura de la línea.

No es muy bonito, ya que su texto puede cortarse en el medio de una carta, pero puede ser útil en algunos casos.

Referencia: http://www.css-101.org/articles/line-clamp/line-clamp_for_non_webkit-based_browsers.php

Answer 13

Hice algo similar para un cliente recientemente. Aquí hay una versión de lo que hice por ellos (ejemplo probado en todas las últimas versiones de navegador en Win Vista). No es perfecto en todos los ámbitos, pero podría modificarse con bastante facilidad.

Demostración: http://enobrev.info/ellipsis/

Código:

<html>
<head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {
$(''.longtext'').each(function() {
if ($(this).attr(''scrollWidth'') > $(this).width()) {
$more = $(''<b class="more">&hellip;</b>'');
// add it to the dom first, so it will have dimensions
$(this).append($more);
// now set the position
$more.css({
top: ''-'' + $(this).height() + ''px'',
left: ($(this).attr(''offsetWidth'') - $more.attr(''offsetWidth'')) + ''px''
});
}
});
});
</script>
<style>
.longtext {
height: 20px;
width: 300px;
overflow: hidden;
white-space: nowrap;
border: 1px solid #f00;
}
.more {
z-index: 10;
position: relative;
display: block;
background-color: #fff;
width: 18px;
padding: 0 2px;
}
</style>
</head>
<body>
<p class="longtext">This is some really long text. This is some really long text. This is some really long text. This is some really long text.</p>
</body>
</html>

Answer 14

Hice un plugin de jQuery realmente genial para manejar todas las variedades de elipsis de texto que se llama ThreeDots @ http://tpgblog.com/threedots

Es mucho más flexible que los enfoques de CSS y admite comportamientos e interacciones personalizables mucho más avanzados.

Disfrutar.

Answer 15

La siguiente solución de CSS única para truncar texto en una sola línea funciona con todos los navegadores listados en http://www.caniuse.com desde 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 líneas múltiples 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, revise mi respuesta en esta otra pregunta .

Answer 16

No pude encontrar un script que funcionara exactamente como yo lo quería, lo mismo hice con jQuery, bastantes opciones para establecer con más en su camino :)

https://github.com/rmorse/AutoEllipsis

Answer 17

Puntos suspensivos multilínea de CSS puro para contenido de texto:

.container{
position: relative; /* Essential */
background-color: #bbb; /* Essential */
padding: 20px; /* Arbritrary */
}
.text {
overflow: hidden; /* Essential */
/*text-overflow: ellipsis; Not needed */
line-height: 16px; /* Essential */
max-height: 48px; /* Multiples of line-height */
}
.ellipsis {
position: absolute;/* Relies on relative container */
bottom: 20px; /* Matches container padding */
right: 20px; /* Matches container padding */
height: 16px; /* Matches line height */
width: 30px; /* Arbritrary */
background-color: inherit; /* Essential...or specify a color */
padding-left: 8px; /* Arbritrary */
}

<div class="container">
<div class="text">
Lorem ipsum dolor sit amet, consectetur eu in adipiscing elit. Aliquam consectetur venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat. Aliquam volutpat ultricies porttitor. Cras risus nisi, accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
</div>
<div class="ellipsis">...</div>
</div>

Por favor revisa el fragmento para ver un ejemplo en vivo.

Answer 18

Reescribí la función de Alex para utilizarla en la biblioteca de MooTools. Lo cambié un poco para saltar palabras en lugar de agregar las elipsis en medio de una palabra.

Element.implement({
ellipsis: function() {
if(this.getStyle("overflow") == "hidden") {
var text = this.get(''html'');
var multiline = this.hasClass(''multiline'');
var t = this.clone()
.setStyle(''display'', ''none'')
.setStyle(''position'', ''absolute'')
.setStyle(''overflow'', ''visible'')
.setStyle(''width'', multiline ? this.getSize().x : ''auto'')
.setStyle(''height'', multiline ? ''auto'' : this.getSize().y)
.inject(this, ''after'');
function height() { return t.measure(t.getSize).y > this.getSize().y; };
function width() { return t.measure(t.getSize().x > this.getSize().x; };
var func = multiline ? height.bind(this) : width.bind(this);
while (text.length > 0 && func()) {
text = text.substr(0, text.lastIndexOf('' ''));
t.set(''html'', text + "...");
}
this.set(''html'', t.get(''html''));
t.dispose();
}
}
});

Answer 19

Sin embargo, estaba un poco sorprendido por el comportamiento del CSS.

var cssEllipsis =
{ "width": "100%","display": "inline-block",
"vertical-align": "middle", "white-space": "nowrap",
"overflow": "hidden", "text-overflow": "ellipsis"
};

A menos que proporcionara el ancho al control al que necesitaba atar los puntos suspensivos, no suponía mi causa. ¿Es el ancho una propiedad imprescindible para ser agregado? Por favor, pon tus pensamientos.

Answer 20

Tengo una solución que funciona en FF3, Safari e IE6 + con texto único y multilínea

.ellipsis {
white-space: nowrap;
overflow: hidden;
}
.ellipsis.multiline {
white-space: normal;
}
<div class="ellipsis" style="width: 100px; border: 1px solid black;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="ellipsis multiline" style="width: 100px; height: 40px; border: 1px solid black; margin-bottom: 100px">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<script type="text/javascript" src="/js/jquery.ellipsis.js"></script>
<script type="text/javascript">
$(".ellipsis").ellipsis();
</script>

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);

Answer 21

Un plugin jQuery más flexible que le permite mantener un elemento después de las elipsis (por ejemplo, un botón de "leer más") y actualizar onWindowResize. También funciona alrededor del texto con marcado:

http://dotdotdot.frebsite.nl

Answer 22

puedes hacer esto mucho más fácil con css solamente, por ejemplo: modo sass

.truncatedText {
font-size: 0.875em;
line-height: 1.2em;
height: 2.4em; // 2 lines * line-height
&:after {
content: " ...";
}
}

y tienes puntos suspensivos;)

Answer 23

Mi respuesta solo admite texto de una sola línea. Mira el comentario de gfullam a continuación para el tenedor de varias líneas, parece bastante prometedor.

Reescribí el código de la primera respuesta varias veces, y creo que debería ser el más rápido.

Primero encuentra una longitud de texto "Estimada", y luego agrega o elimina un carácter hasta que el ancho sea correcto.

La lógica que usa se muestra a continuación:

Después de encontrar una longitud de texto "estimada", los caracteres se agregan o eliminan hasta que se alcanza el ancho deseado.

Estoy seguro de que necesita algunos ajustes, pero aquí está el código:

(function ($) {
$.fn.ellipsis = function () {
return this.each(function () {
var el = $(this);
if (el.css("overflow") == "hidden") {
var text = el.html().trim();
var t = $(this.cloneNode(true))
.hide()
.css(''position'', ''absolute'')
.css(''overflow'', ''visible'')
.width(''auto'')
.height(el.height())
;
el.after(t);
function width() { return t.width() > el.width(); };
if (width()) {
var myElipse = "....";
t.html(text);
var suggestedCharLength = (text.length * el.width() / t.width()) - myElipse.length;
t.html(text.substr(0, suggestedCharLength) + myElipse);
var x = 1;
if (width()) {
while (width()) {
t.html(text.substr(0, suggestedCharLength - x) + myElipse);
x++;
}
}
else {
while (!width()) {
t.html(text.substr(0, suggestedCharLength + x) + myElipse);
x++;
}
x--;
t.html(text.substr(0, suggestedCharLength + x) + myElipse);
}
el.html(t.html());
t.remove();
}
}
});
};
})(jQuery);

Answer 24

<html>
<head>
<!-- By Warren E. Downs, copyright 2016. Based loosely on a single/multiline JQuery using example by Alex,
but optimized to avoid JQuery, to use binary search, to use CSS text-overflow: ellipsis for end,
and adding marquee option as well.
Credit: Marquee: http://jsfiddle.net/jonathansampson/xxuxd/
JQuery version: http://.com/questions/536814/insert-ellipsis-into-html-tag-if-content-too-wide
(by Alex, http://.com/users/71953/alex)
(Improved with Binary Search as suggested by StanleyH, http://.com/users/475848/stanleyh)
-->
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<style>
.single {
overflow:hidden;
white-space: nowrap;
width: 10em;
padding: 10px;
margin: 0 auto;
border: solid 1px blue;
}
.multiline {
overflow: hidden;
white-space: wrap;
width: 10em;
height: 4.5em;
padding: 10px;
margin: 0 auto;
border: solid 1px blue;
}
.marquee {
overflow: hidden;
width: 40em;
padding: 10px;
margin: 0 auto;
border: solid 1px blue;
}
</style>
<script>
var _marqueeNumber=0;
// mode=start,end,middle
function clipText(text, len, mode) {
if(!mode) { mode="end"; }
else { mode=mode.toLowerCase(); }
if(mode == "start") { return "&hellip;"+clipText(text,len,"_start"); }
if(mode == "_start") { return text.substr(text.length - len); }
if(mode == "middle") {
return clipText(text, len/2, "end") + clipText(text, len/2, "_start");
}
return text.substr(0, len) + "&hellip;";
}
function generateKeyframes(clsName, start, end) {
var sec=5;
var totalLen=parseFloat(start)-parseFloat(end);
if(start.indexOf(''em'') > -1) { sec=Math.round(totalLen/3); }
else if(start.indexOf(''px'') > -1) { sec=Math.round(totalLen/42); }
var style = document.createElement(''style'');
style.type = ''text/css'';
style.innerHTML = ''body {}'';
document.getElementsByTagName(''head'')[0].appendChild(style);
this.stylesheet = document.styleSheets[document.styleSheets.length-1];
try {
this.stylesheet.insertRule(''.''+clsName+'' {/n''+
'' animation: ''+clsName+'' ''+sec+''s linear infinite;/n''+
''}/n'', this.stylesheet.rules.length);
this.stylesheet.insertRule(''.''+clsName+'':hover {/n''+
'' animation-play-state: paused/n''+
''}/n'', this.stylesheet.rules.length);
this.stylesheet.insertRule(''@keyframes ''+clsName+'' {/n''+
'' 0% { text-indent: ''+start+'' }/n''+
'' 100% { text-indent: ''+end+'' }/n''+
''}'', this.stylesheet.rules.length);
} catch (e) {
console.log(e.message);
}
}
function addClone(el, multiline, estyle) {
if(!estyle) {
try { estyle=window.getComputedStyle(el); }
catch(e) { return null; }
}
var t = el.cloneNode(true);
var s=t.style;
//s.display=''none'';
s.visibility=''hidden''; // WARNING: Infinite loop if this is not hidden (e.g. while testing)
s.display=''inline-block'';
s.background=''black'';
s.color=''white'';
s.position=''absolute'';
s.left=0;
s.top=0;
s.overflow=''visible'';
s.width=(multiline ? parseFloat(estyle.width) : ''auto'');
s.height=(multiline ? ''auto'' : parseFloat(estyle.height));
el.parentNode.insertBefore(t, el.nextSibling);
return t;
}
function getTextWidth(el, multiline) {
var t=addClone(el, multiline);
if(!t) { return null; }
var ts=window.getComputedStyle(t);
var w=ts.width;
if(multiline) {
var es=window.getComputedStyle(el);
var lines=Math.round(parseInt(ts.height)/parseInt(es.height))*2+0.5;
w=w+'''';
var unit=''''; // Extract unit
for(var xa=0; xa<w.length; xa++) {
var c=w[xa];
if(c <= ''0'' || c >= ''9'') { unit=w.substr(xa-1); }
}
w=parseFloat(w);
w*=lines; // Multiply by lines
w+=unit; // Append unit again
}
t.parentNode.removeChild(t);
return w;
}
// cls=class of element to ellipsize
// mode=start,end,middle,marq (scrolling marquee instead of clip)
function ellipsis(cls, mode) {
mode=mode.toLowerCase();
var elems=document.getElementsByClassName(cls);
for(xa in elems) {
var el=elems[xa];
var multiline = el.className ? el.className.indexOf(''multiline'') > -1 : true;
if(mode == "marq") {
var w=getTextWidth(el, multiline);
if(!w) { continue; }
var mCls="dsmarquee"+(_marqueeNumber++);
var es=window.getComputedStyle(el);
generateKeyframes(mCls,es.width, ''-''+w);
el.className+=" "+mCls;
continue;
}
if(mode == "end" && !multiline) { el.style.textOverflow="ellipsis"; continue; }
var estyle=null;
try { estyle=window.getComputedStyle(el); }
catch(e) { continue; }
if(estyle.overflow == "hidden") {
var text = el.innerHTML;
var t=addClone(el, multiline, estyle);
function height() {
var ts=window.getComputedStyle(t);
var es=window.getComputedStyle(el);
return parseFloat(ts.height) - parseFloat(es.height);
}
function width() {
var ts=window.getComputedStyle(t);
var es=window.getComputedStyle(el);
return parseFloat(ts.width) - parseFloat(es.width);
}
var tooLong = multiline ? height : width;
var len=text.length;
var diff=1;
var olen=0;
var jump=len/2;
while (len > 0) {
var diff=tooLong();
if(diff > 0) { len-=jump; jump/=2; }
else if(diff < 0) { len+=jump; }
len=Math.round(len);
//alert(''len=''+len+'';olen=''+olen+'';diff=''+diff+'';jump=''+jump+'';t=''+JSON.stringify(t.innerHTML));
t.innerHTML=clipText(text, len, mode);
if(olen == len) { break; }
olen=len;
}
el.innerHTML=t.innerHTML;
t.parentNode.removeChild(t);
}
//break;
t.style.visibility=''hidden'';
}
}
function testHarness() {
ellipsis(''ellipsis1'', ''start'');
ellipsis(''ellipsis2'', ''end'');
ellipsis(''ellipsis3'', ''middle'');
ellipsis(''marquee'', ''marq'')
}
</script>
</head>
<body onload="testHarness()">
<div class="single ellipsis1" style="float:left">some long text that should be clipped left</div>
<div class="single ellipsis2" style="float:right">right clip long text that should be clipped</div>
<div class="single ellipsis3" style="float:center">some long text that should be clipped in the middle</div>
<br />
<p class="single marquee">Windows 8 and Windows RT are focused on your life—your friends and family, your apps, and your stuff. With new things like the <a href="http://windows.microsoft.com/en-US/windows-8/start-screen">Start screen</a>, <a href="http://windows.microsoft.com/en-US/windows-8/charms">charms</a>, and a <a href="http://windows.microsoft.com/en-US/windows-8/microsoft-account">Microsoft account</a>, you can spend less time searching and more time doing.</p>
&nbsp;
<br />
<div class="multiline ellipsis1" style="float:left">Test test test test test test, some more long text, such as asdasdasdasdasd, that should be multiline clipped left(*)</div>
<div class="multiline ellipsis2" style="float:right">right clip multiline long text, such as Test test test test test test, and some more long text that should be multiline clipped right.</div>
<div class="multiline ellipsis3" style="float:center">Test test test test test test, some more long text, such as asdasdasdasdasd, that should be multiline clipped in the middle(*)</div>
<br />
<p class="multiline marquee">Multiline Marquee: Windows 8 and Windows RT are focused on your life—your friends and family, your apps, and your stuff. With new things like the <a href="http://windows.microsoft.com/en-US/windows-8/start-screen">Start screen</a>, <a href="http://windows.microsoft.com/en-US/windows-8/charms">charms</a>, and a <a href="http://windows.microsoft.com/en-US/windows-8/microsoft-account">Microsoft account</a>, you can spend less time searching and more time doing.</p>
&nbsp;
</body>
</html>