Comment puis-je imiter le débordement de texte: points de suspension dans Firefox?

Question

J'ai un texte dynamique contenu dans un div qui est défini sur ce que l'utilisateur entre dans un champ de zone de texte. Si le texte ne rentre pas dans la div, il est pour l'instant tronqué et tout le texte dépassant la bordure n'est pas visible. Je voudrais tronquer le texte afin qu'il tienne dans la boîte et que des points de suspension (...) soient ajoutés à la fin. Par exemple:

|----div width------|
 Here is some sample text that is too long.
 Here is some sam...

Évidemment, dans l'exemple, c'est facile car la balise de code utilise une police à largeur fixe, c'est donc aussi simple que de compter les caractères. J'ai une police à largeur variable, donc, s'ils entrent dans "WWWWWWWWWWW &"; il se remplira beaucoup moins de caractères que "" ................" aurait.

Quelle est la meilleure façon de faire cela? J'ai trouvé une solution potentielle pour simplement trouver la largeur de pixel réelle du texte ici: http://www.codingforums.com/archive/index.php/t-100367.html

Mais même avec une telle méthode, il est un peu gênant de mettre en œuvre les points de suspension. Donc, s'il y a 20 caractères et que je trouve que ça ne va pas, je devrais en tronquer 19, ajouter les points de suspension, puis vérifier si ça va encore. Puis tronquez à 18 (plus les points de suspension) et réessayez. Et encore. Et encore ... jusqu'à ce que ça convienne. Y a-t-il un meilleur moyen?

EDIT: J’ai décidé, en fonction des réponses fournies, que mon approche initiale était la meilleure, sauf que j’ai essayé d’améliorer la solution présentée dans le lien ci-dessus en ne créant pas un élément td séparé simplement pour mesurer, ce qui ressemble à un hack.

Voici mon code:

<div id="tab" class="tab">
    <div id="tabTitle" class="tabTitle">
        <div class="line1">user-supplied text will be put here</div>
        <div class="line2">more user-supplied text will be put here</div>
    </div>
</div>

Et les styles:

.tab {
padding: 10px 5px 0px 10px;
margin-right: 1px;
float: left;
width: 136px;
height: 49px;
background-image: url(../images/example.gif);
background-position: left top;
background-repeat: no-repeat;
}    

.tab .tabTitle {
    height: 30px;
width: 122px;
    overflow: hidden;
    text-overflow: ellipsis;
font-size: 12px;
font-weight: bold;
color: #8B8B8B;
}

.tab .tabTitle .line1, .tab .tabTitle .line2 {
    display:inline;
    width:auto;
}

et le javascript qui limite et ajoute les points de suspension:

function addOverflowEllipsis( containerElement, maxWidth )
{
    var contents = containerElement.innerHTML;
    var pixelWidth = containerElement.offsetWidth;
    if(pixelWidth > maxWidth)
    {
        contents = contents + "…"; // ellipsis character, not "..." but "…"
    }
    while(pixelWidth > maxWidth)
    {
        contents = contents.substring(0,(contents.length - 2)) + "…";
        containerElement.innerHTML = contents;
        pixelWidth = containerElement.offsetWidth;
    }
}

Le " line1 " et " line2 " les divs sont passés à la fonction. Cela fonctionne dans le cas d'une entrée avec un seul mot comme "WWWWWWWWWWWWWWWWWWWW". mais ne fonctionne pas avec une entrée de plusieurs mots "WWWWW WWWWW WWWWW" car il ajoute simplement des sauts de ligne et mesure le texte comme étant la largeur de "WWWWW".

Existe-t-il un moyen de remédier à ce problème sans avoir à copier le texte dans un élément de mesure masqué? Un moyen de définir le style des séparations de ligne pour qu’elles ne recouvrent pas le texte?

Answer 1

  

Une manière de définir le style des divs de ligne pour qu'ils ne recouvrent pas le texte?

Voilà le espace-blanc: nowrap pour. Oui, cela fonctionne aussi dans les anciens navigateurs.

Answer 2

Ce problème doit également fonctionner sur Firefox.

HTML

<div class="ellipsis">Here goes too long text and when it is takes more than 200px in "end" of the text appears "..."</div>

CSS

.ellipsis{
width:200px;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-moz-binding:url('bindings.xml#ellipsis');//issue for Firefox
}

bindings.xml

<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="none">
    <content><children/></content>
</binding>
<binding id="ellipsis">
    <content>
        <xul:label crop="end"><children/></xul:label>
    </content>
    <implementation>
        <field name="label">document.getAnonymousNodes(this)[0]</field>
        <field name="style">this.label.style</field>
        <property name="display">
            <getter>this.style.display</getter>
            <setter>if(this.style.display!= val)this.style.display=val</setter>
        </property>
        <property name="value">
            <getter>this.label.value</getter>
            <setter>if(this.label.value!=val)this.label.value=val</setter>
        </property>
        <method name="update">
            <body>
                var strings= this.textContent.split(/\s+/g)
                if(!strings[0])strings.shift()
                if(!strings[strings.length-1])strings.pop()
                this.value=strings.join('')
                this.display=strings.length?'':'none'
            </body>
        </method>
        <constructor>this.update()</constructor>
    </implementation>
    <handlers>
        <handler event="DOMSubtreeModified">this.update()</handler>
    </handlers>
</binding>
</bindings>

Answer 3

Si vous utilisez jQuery, il existe un excellent plug-in que j'utilise.

Alternativement, [cet exemple] (404 non trouvé!) semble fonctionner avec plusieurs navigateurs.

Des questions, coup de fil dans les commentaires!

404 lien: http://www.hedgerwow.com/360/ dhtml / text_overflow / demo2.php

Answer 4

La nouvelle version de CSS (CSS3) devrait inclure débordement de texte: points de suspension , pour vous aider. Il fonctionne actuellement dans les versions 6 et supérieures d'IE, ainsi que dans Safari et Chrome. Ce n’est pas supporté par Firefox, ce n’est donc pas vraiment une réponse utile pour le moment, mais il convient de garder à l’esprit que le meilleur moyen, à terme, sera de laisser CSS gérer cela.

Projet de spécification CSS3: http: //www.w3.org/TR/2001/WD-css3-text-20010517/#text-overflow-props

Navigateurs pris en charge: http://www.quirksmode.org/css/contents.html (faites défiler jusqu'à "débordement de texte" près du bas)

Answer 5

Tout simplement, non, il n'y a pas de meilleur moyen sans recourir à des hacks.

Vous pouvez, par exemple, utiliser une position: span absolu pour positionner votre " ... " en plus du contenu actuel, avec overflow: hidden est défini sur le conteneur et masque uniquement la plage supplémentaire si le contenu tient dans le conteneur. Cela vous permettrait d'exécuter le code de troncature une seule fois.

Personnellement, je ne ferais que lancer le calcul de la largeur en pixels quelques fois de plus. Définir le texte et lire la largeur est une opération rapide, elle ne devrait donc pas être perceptible.

Answer 6

Utilisez débordement de texte: points de suspension . Ce n'est pas seulement IE ... La plupart des principaux navigateurs peuvent le faire.
Mais si vous ne pouvez pas ici est un plugin jQuery pour cela.

Answer 7

Pour répondre à l'un des points que vous soulevez:

  

Donc si c'est 20 caractères et que je trouve   que ça ne rentre pas, il faudrait que je   tronquer à 19, ajouter les points de suspension, et   puis vérifiez si cela convient à nouveau. ensuite   tronquer à 18 (plus les points de suspension) et   réessayer. Et encore. Et   encore ... jusqu'à ce que ça rentre. y a t-il   meilleure façon?

Un moyen beaucoup plus rapide de trouver la longueur correcte consiste à couper la chaîne en deux et à la tester pour voir si elle vous va. Si c'est le cas: ajoutez un quart de la longueur d'origine, et si ça ne vous coupe pas le quart, testez-le pour voir si ça vous va. Répétez de manière récursive avec 1 / 8ème, 1 / 16ème, 1 / 32ème, ... de la longueur d'origine, jusqu'à ce que cette valeur d'addition / soustraction soit inférieure à 1.

C’est un algorithme de recherche: pour les chaînes plus longues que quelques mots, vous pouvez généralement diviser par 10 le nombre de tests à effectuer dans le DOM.

Answer 8

Essayez ceci:

Link One

Mise à jour:

Si vous utilisez la propriété exclusive {word-wrap: break-word;}, IE forcera un saut de ligne. Les navigateurs modernes pourraient avoir la valeur par défaut {overflow: visible;}, et ils déborderaient correctement, sans développer le conteneur.

Answer 9

Non, ce n'est pas une tâche simple. Je devais faire la même chose il y a un an et j'ai constaté que même Internet Explorer (à partir de la version 6), Opera et Safari peuvent le faire, mais pas de Firefox. Désolé, seuls les hacks peuvent vous sauver

Answer 10

essayez dojox.html.ellipsis

Answer 11

Avec Opera:

-o-text-overflow:ellipsis;

Answer 12

J'ai remplacé this.value = strings.join ('') par this.value = strings.join ('') à partir de Binyamin la réponse, et cela a bien fonctionné pour moi!

Answer 13

À propos de Firefox 4.0 et de la débordement de texte: points de suspension , toujours non implémentée, propriété CSS:

Ce lien donne une solution partielle au problème.

Cela produit un résultat similaire à débordement de texte: points de suspension en utilisant seulement css.