JavaScript: Tronquer le texte en fonction des dimensions de l'objet externe

Question

Je veux, en utilisant JavaScript, couper le texte donné pour l'adapter à l'objet dans lequel le texte réside et ajouter "..." à la fin.

Par exemple: JavaScript a reçu des données du service Web de tiers et doit mettre le texte en 200 x 300 px div. La longueur du texte varie, alors disons qu'il faudra beaucoup plus d'espace que prévu.

Comment déterminer à quel point le texte va franchir la frontière et empêcher cela en hachant le texte et en ajoutant "..." à la fin?

Answer 1

Il existe several jQuery plugins qui peut le faire.

Answer 2

Si cela ne vous dérange pas d'utiliser l'élément canvas, il peut être utilisé pour mesurer la largeur du texte. Voici un exemple:

http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/demo/8_2_canvas_measureText.html

Answer 3

ruzee.com has a solution qui utilise prototype.js et un petit morceau de code [MIT licence] pour faire ce que vous voulez; demo

Answer 4

Vous pouvez également regarder dans la propriété CSS 3 text-overflow qui fait également cela.

http://www.w3.org/TR/2001/WD-css3-text-20010517/#text-overflow-props

Il est possible de vérifier si le navigateur prend en charge, donc vous pouvez toujours ajouter une chute JavaScript en arrière.

if (!'textOverflow' in document.createElement('div').style) { 
    // Use JavaScript solution here 
}