Comment utiliser des points de suspension pour remplacer le contenu excédentaire en javascript

Dans le développement de pages, le contenu du texte dépasse souvent la limite. À l'heure actuelle, nous utilisons généralement des points de suspension pour remplacer le contenu excédentaire afin de garder la page belle et concise. En JavaScript, nous pouvons utiliser certaines méthodes pour réaliser cette fonctionnalité.

1. Méthode CSS

CSS possède déjà l'attribut text-overflow, qui est utilisé pour contrôler la manière de gérer le débordement de texte dans un élément. Cet attribut a trois valeurs :

1. clip : coupe la partie excédentaire.
2. ellipse : utilisez des ellipses pour remplacer les pièces en excès.
3. unset : Désarmé.

L'utilisation de l'attribut text-overflow nécessite de définir l'attribut overflow sur masqué ou scroll. Dans le même temps, l'attribut white-space doit être défini sur nowrap pour empêcher le retour à la ligne du texte.

Par exemple :

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Utilisez ce nom de classe en HTML pour obtenir l'effet de points de suspension du texte en excès.

2. Méthode JavaScript

Si l'effet de points de suspension ne peut pas être obtenu via CSS, JavaScript peut être utilisé pour l'obtenir. Voici quelques méthodes d'implémentation :

1. Utilisation de la méthode substring()

La méthode substring() en JavaScript est utilisée pour obtenir une partie d'une chaîne. Vous pouvez utiliser cette méthode pour tronquer une chaîne et ajouter des points de suspension à la fin.

function truncateText(text, length) {
  var truncated = text.substring(0, length);
  return truncated + '...';
}

// 使用方法
var text = '这是一段超出了限定长度的文本。';
var truncatedText = truncateText(text, 10);

console.log(truncatedText); // "这是一段超出了限定长度的..."

Le problème avec cette méthode est que si la longueur du texte est inférieure à la longueur limite, des ellipses seront également ajoutées.

2. Utilisez la méthode slice()

Semblable à la méthode substring(), la méthode slice() peut également intercepter une partie de la chaîne. La différence est que la méthode slice() peut accepter des nombres négatifs comme paramètres, ce qui signifie couper à partir de la fin.

function truncateText(text, length) {
  var truncated = text.slice(0, length);
  if (text.length > length) {
    truncated += '...';
  }
  return truncated;
}

// 使用方法
var text = '这是一段超出了限定长度的文本。';
var truncatedText = truncateText(text, 10);

console.log(truncatedText); // "这是一段超出了限定长度的..."

Utilisez la méthode slice() pour éviter le problème de l'ajout de points de suspension lorsque la longueur de la chaîne est inférieure à la longueur limitée.

3. Utilisez les méthodes split() et join()

Vous pouvez d'abord convertir la chaîne de texte en un tableau, puis utiliser la méthode join() pour fusionner les n premiers éléments du tableau en une chaîne. Enfin, ajoutez des points de suspension à la fin de la chaîne.

function truncateText(text, length) {
  var words = text.split(' ');
  var truncatedWords = words.slice(0, length);
  if (words.length > length) {
    truncatedWords.push('...');
  }
  return truncatedWords.join(' ');
}

// 使用方法
var text = '这是一段超出了限定长度的文本。';
var truncatedText = truncateText(text, 5);

console.log(truncatedText); // "这是一段超出了限定长度的文本。"

Le problème avec cette méthode est qu'elle ne peut pas gérer certains caractères spéciaux, tels que les nouvelles lignes ou les tabulations.

Résumé

L'utilisation de la propriété text-overflow de CSS peut facilement obtenir l'effet de points de suspension du texte, mais elle peut ne pas convenir à certains cas particuliers. Pour implémenter l'effet de points de suspension en JavaScript, vous devez choisir une méthode appropriée en fonction de la situation spécifique. Quoi qu’il en soit, des ajustements et des optimisations appropriés doivent être effectués en fonction des besoins réels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!