Comment couper la chaîne en javascript pour qu'elle tienne exactement sur deux lignes et ajouter ... à la fin

Question

J'ai un besoin où je dois afficher le texte sur deux lignes et ajouter ... si c'est trop. La largeur de ma div est fixe (même la hauteur peut être considérée comme fixe).

Le texte actuel se présente comme suit :

1

Lorem Ipsum est simplement
texte fictif de l'impression
et l'industrie de la composition.

2

Lorem Ipsum est simplement du texte
de l'impression et des types
l'industrie.

Attendu :

1

Lorem Ipsum est simplement
texte fictif de l'impression...

2

Lorem Ipsum est simplement du texte
de l'imprimerie et de la typographie...

Je ne veux pas être surchargé par des plugins (le plugin jquery three dots le fait).

J'envisage de le faire en coupant la chaîne de caractères, la largeur de la div étant fixe.

Merci d'avance.

Answer 1

UPDATE : On dirait que text-overflow n'est utile que pour la troncature horizontale.

Voici un petit jQuery qui devrait fonctionner.

Essayez-le : http://jsfiddle.net/UfxYQ/

var $container = $('#container');
var $text = $('#text');
var originalText = $text.text();
var temp = originalText;

if( $container.outerHeight() < $text.outerHeight() ) {

    while($container.outerHeight() < $text.outerHeight()) {
        $text.text( temp = temp.substr(0, temp.length-1) );
    }
    $text.text( temp = temp.substr(0, temp.length-3) );
    $text.append('...');
}

HTML

<div id='container'>
    <span id='text'>Lorem Ipsum is simply
        dummy text of the printing
        and typesetting industry.
    </span>
</div>​

CSS

#container {
    width: 150px;
    height: 50px;
    line-height: 25px;
    position: relative;
}

---

Vous ne bénéficierez pas d'une prise en charge complète de tous les navigateurs, mais vous en serez proche. Il existe une propriété CSS appelée text-overflow qui est pris en charge par IE6+, Safari, Konqueror et Opera (avec une propriété spécifique à Opera).

~~

#myOverflowDiv {
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

http://www.quirksmode.org/css/textoverflow.html

~~

http://www.quirksmode.org/css/contents.html#t413

Answer 2

La propriété CSS text-overflow est la meilleure solution, mais elle n'est pas encore prise en charge par tous les navigateurs. Si vous souhaitez utiliser Javascript, vous pouvez créer un élément hors écran. Utilisez le CSS (généré par le script) pour lui donner la même largeur et la même police que votre cible, avec une hauteur de '2em' (c'est-à-dire 2 lignes). Exécutez une boucle, en ajoutant le texte une lettre à la fois, jusqu'à ce que vous soyez à court de lettres ou que la hauteur change. Lorsque la hauteur augmente, vous savez que vous avez dépassé les deux lignes.

Bien entendu, vous devez également tenir compte de la largeur du "...", et vous pouvez donc l'ajouter à la lettre que vous êtes sur le point d'ajouter.

Assurez-vous que l'élément est hors écran plutôt que d'utiliser "display : none", car les éléments non affichés n'ont pas de hauteur. L'option "visibility : hidden" pourrait fonctionner ; je n'ai pas essayé.

Answer 3

Juste un ajout pour le message de l'utilisateur 113716. Une approche plus propre :

var $container = $('#container');
var $text = $('#text');
var temp = $text.text();

if ($container.height() < $text.outerHeight()) {
  while($container.height() < $text.outerHeight()) {
    temp = temp.substr(0, temp.length-1)
    $text.text(temp + '...');
  }
}

http://jsfiddle.net/YR7F2/

Answer 4

Comme le css de l'overflow ellipsis ne fonctionne pas pour le texte multiligne, vous devez le faire avec JavaScript. Vous pouvez copier la zone de texte, la positionner de manière absolue avec top -1000000px et couper la dernière lettre du texte jusqu'à ce que la zone ait la bonne hauteur. Ou vous pouvez simplement couper après un nombre spécifique de lettres, ce qui sera plus rapide mais pas précis.

Answer 5

Une bonne façon de le faire serait d'utiliser un petit plugin jQuery...

$.fn.trimToParentHeight = function(options) {
    options = $.extend($.fn.trimToParentHeight.defaults, options);

    return this.each(function(index, text) {
        text = $(text);
        var height = parseInt(text.parent().height());
        var temp = text.text();
        while(parseInt(text.outerHeight()) > height && temp.length>0) {
            temp = temp.substr(0, temp.length-1)
            text.text(temp +  options.ellipsis);
        }
    });
}

$.fn.trimToParentHeight.defaults = {
    ellipsis: '...'
};

Vous pouvez alors faire...

$(".container .text").trimToParentHeight()

... tant que le conteneur est le parent direct du texte.