JavaScript - texto visible de un DIV

Question

---------------------------------------------------- 
| This is my text inside a div and I want the overf|low of the text to be cut 
---------------------------------------------------- 

por favor que quiero que el desbordamiento de ser eliminado, por lo que la propiedad CSS puntos suspensivos No trabajaría para mí. Así que, básicamente, quiero que el texto anterior que aparezca así:

---------------------------------------------------- 
| This is my text inside a div and I want the overf| 
---------------------------------------------------- 

¿Cómo es esto posible con JavaScript puro?

EDITAR

Necesito una función JavaScript para recortar el texto porque necesito contar los caracteres del texto visible.

Answer 1

Bien, no vi la adenda a la pregunta. Aunque anteriormente dije que no era posible hacer esto usando JavaScript y una fuente que no es de ancho fijo ... en realidad es ¡es posible!

Puede envolver cada carácter individual en un <span>, y encontrar el primer <span> que está fuera de los límites del elemento primario. Algo así como:

function countVisibleCharacters(element) { 
    var text = element.firstChild.nodeValue; 
    var r = 0; 

    element.removeChild(element.firstChild); 

    for(var i = 0; i < text.length; i++) { 
     var newNode = document.createElement('span'); 
     newNode.appendChild(document.createTextNode(text.charAt(i))); 
     element.appendChild(newNode); 

     if(newNode.offsetLeft < element.offsetWidth) { 
      r++; 
     } 
    } 

    return r; 
} 

Here's a demo.

Answer 2

.col { width:40px; overflow: hidden; white-space:nowrap; }

white-space: nowrap; es necesario cuando el contenido tiene espacios.

De cualquier manera, las palabras largas en líneas simples no aparecen. http://jsfiddle.net/h6Bhb/

Answer 3

probar esto, se requiere un ancho fijo si eso es bien con usted: http://jsfiddle.net/trpeters1/qvZKw/20/

HTML:

<div class="col">This is my text inside a div and I want the overf|low of the text to be cut</div> 

CSS:

.col { 
    width:120px; 
    overflow: hidden; 
    white-space:nowrap; 

}​ 

Answer 4

Está intentando forzar un problema de CSS en JavaScript. Guarda el martillo y saca un destornillador. http://en.wiktionary.org/wiki/if_all_you_have_is_a_hammer,_everything_looks_like_a_nail

Resolver la respuesta de la cantidad de caracteres probablemente sea irrelevante si das un paso atrás. El último carácter podría ser solo parcialmente visible, y el recuento de caracteres es drásticamente diferente dados los cambios de tamaño de fuente, la diferencia de ancho entre W an i, etc. Probablemente el ancho de div es más importante que el recuento de caracteres en el verdadero problema.

Si todavía está atascado en descifrar los caracteres visibles, coloque un lapso dentro del div alrededor del texto, use el css proporcionado en otras respuestas a esta pregunta, y luego en JavaScript recorte un carácter a la vez fuera del cadena hasta que el ancho del tramo sea menor que el ancho del div. Y luego observe como su navegador se congela por unos segundos cada vez que hace eso en un gran párrafo.

Answer 5

Puede hacerlo con Javascript. Aquí hay una función que cuenta el número de caracteres visibles en un elemento, independientemente de las hojas externas de CSS y los estilos en línea aplicados al elemento.Yo lo he probado sólo en Chrome, pero creo que es transversal navegador amigable:

function count_visible(el){ 
    var padding, em, numc; 
    var text = el.firstChild.data; 
    var max = el.clientWidth; 

    var tmp = document.createElement('span'); 
    var node = document.createTextNode(); 
    tmp.appendChild(node); 
    document.body.appendChild(tmp); 

    if(getComputedStyle) 
     tmp.style.cssText = getComputedStyle(el, null).cssText; 
    else if(el.currentStyle) 
     tmp.style.cssText = el.currentStyle.cssText; 

    tmp.style.position = 'absolute'; 
    tmp.style.overflow = 'visible'; 
    tmp.style.width = 'auto'; 

    // Estimate number of characters that can fit. 
    padding = tmp.style.padding; 
    tmp.style.padding = '0'; 
    tmp.innerHTML = 'M'; 
    el.parentNode.appendChild(tmp); 
    em = tmp.clientWidth; 
    tmp.style.padding = padding;  
    numc = Math.floor(max/em); 

    var width = tmp.clientWidth; 

    // Only one of the following loops will iterate more than one time 
    // Depending on if we overestimated or underestimated. 

    // Add characters until we reach overflow width 
    while(width < max && numc <= text.length){ 
     node.nodeValue = text.substring(0, ++numc); 
     width = tmp.clientWidth; 
    } 

    // Remove characters until we no longer have overflow 
    while(width > max && numc){ 
     node.nodeValue = text.substring(0, --numc); 
     width = tmp.clientWidth; 
    } 

    // Remove temporary div 
    document.body.removeChild(tmp); 

    return numc; 
} 

JSFiddle Example