JavaScript – Texte visible d'un DIV

D'accord, je n'ai pas vu l'additif à la question. Bien que j'avais déjà dit qu'il n'était pas possible de le faire en utilisant JavaScript et une police qui n'est pas à largeur fixe … c'est possible!

Vous pouvez envelopper chaque caractère individuel dans un <span> et trouver le premier <span> qui se trouve en dehors des limites du parent. Quelque chose comme:

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

Voici une démo.

Vous pouvez le faire avec Javascript. Voici une fonction qui compte le nombre de caractères visibles dans un élément, indépendamment des feuilles css externes et des styles intégrés appliqués à l'élément. Je ne l'ai testé que dans Chrome, mais je pense qu'il est convivial pour les navigateurs:

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

Exemple JSFiddle

Vous essayez de forcer un problème CSS en JavaScript. Mettez le marteau et sortez un tournevis. http://fr.wiktionary.org/wiki/if_all_you_have_is_a_hammer,_home_d'une_parte_like_a_nail

Résoudre la réponse du nombre de caractères est probablement sans importance si vous faites un pas en arrière. Le dernier caractère ne peut être que partiellement visible, et le nombre de caractères est radicalement différent compte tenu des changements de taille de police, de la différence de largeur entre W an i, etc. Probablement, la largeur du div est plus importante que le nombre de caractères dans le vrai problème.

Si vous êtes encore coincé sur la recherche des caractères visibles, placez un intervalle à l'intérieur du div autour du texte, utilisez le css fourni dans d'autres réponses à cette question, puis, en JavaScript, ajoutez un caractère à la fois hors de la chaîne jusqu'à ce que la portée La largeur est inférieure à la largeur du div. Et puis regardez que votre navigateur gèle pendant quelques secondes chaque fois que vous le faites à un grand paragraphe.

Essayez ceci, il faut une largeur fixe si cela vous convient: 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; }​ 

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

White-space: nowrap; Est nécessaire lorsque le contenu a des espaces.

Quoi qu'il en soit, les mots longs en une seule ligne n'apparaissent pas. http://jsfiddle.net/h6Bhb/