JavaScript - Testo visibile di un DIV

Question

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

Si prega di notare che voglio rimuovere l'overflow, quindi la proprietà di ellissi CSS non funzionerebbe per me. Quindi, fondamentalmente, voglio che il testo qui sopra per apparire come questo:

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

Come è possibile con puro JavaScript?

EDIT

ho bisogno di una funzione JavaScript per ritagliare il testo perché ho bisogno di contare i caratteri del testo visibile.

Answer 1

Ok, non ho visto l'addendum alla domanda. Anche se in precedenza avevo detto che non era possibile farlo usando JavaScript e un font che non è a larghezza fissa ... in realtà è possibile!

È possibile racchiudere ogni singolo carattere in un <span> e trovare il primo <span> che si trova all'esterno dei limiti del genitore. Qualcosa di simile:

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; è necessario quando il contenuto ha spazi.

In entrambi i casi, le parole lunghe in righe singole non vengono visualizzate. http://jsfiddle.net/h6Bhb/

Answer 3

provare questo, che richiede una larghezza fissa se questo è ok con voi: 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

Stai provando a forzare un problema CSS in JavaScript. Metti via il martello e tira fuori un cacciavite. http://en.wiktionary.org/wiki/if_all_you_have_is_a_hammer,_everything_looks_like_a_nail

Risolvere la risposta del conteggio dei caratteri è probabilmente irrilevante se si fa un passo indietro. L'ultimo carattere potrebbe essere solo parzialmente visibile, e il conteggio dei caratteri è drasticamente diverso in base alle modifiche della dimensione del carattere, alla differenza di larghezza tra W an e così via. Probabilmente la larghezza del div è più importante del numero di caratteri nel vero problema.

Se sei ancora bloccato a capire i caratteri visibili, inserisci uno span all'interno del div attorno al testo, usa il css fornito in altre risposte a questa domanda, e poi in JavaScript ritaglia un personaggio alla volta al di fuori del stringa finché la larghezza dello span non è inferiore alla larghezza del div. E poi guarda come il tuo browser si blocca per qualche secondo ogni volta che lo fai su un grande paragrafo.

Answer 5

È possibile farlo con Javascript. Ecco una funzione che conta il numero di caratteri visibili in un elemento, indipendentemente dai fogli css esterni e dagli stili incorporati applicati all'elemento.Ho provato solo in Chrome, ma penso che sia cross browser amichevole:

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