Comment utiliser les points de suspension lorsque le nombre de caractères affichés dans le contrôle de texte HTML dépasse la limite

Comment résoudre le problème selon lequel le nombre de mots affichés dans le contrôle de texte HTML dépasse la limite ? C'est-à-dire que le débordement de texte contrôle le nombre de mots affichés et le débordement de texte du tableau contrôle le nombre de mots affichés dans td

Lorsque vous verrez le titre, vous penserez facilement à la méthode de tronquage du. texte et en ajoutant des points de suspension "...". Haha, c'est tout. En fait, rédiger ce journal sert simplement à enregistrer cette méthode, car il semble que beaucoup de gens ne se souviennent toujours pas de la manière de gérer une telle situation.

L'image ci-dessous est l'effet d'affichage du site Web PHP chinois (www.php.cn) qui dépasse le nombre de mots et ajoute des points de suspension

Premier surtout, laissez-moi vous expliquer que DIV est généralement utilisé. Le texte dans le conteneur +css qui dépasse la longueur flottera en dehors de la boîte ou agrandira la boîte. C'est généralement facile à résoudre, mais j'ai rencontré ce problème aujourd'hui : la page de test l'a fait. ne répond pas sous IE6, mais la page de test est traitée normalement sous IE8. J'étais déprimé lorsque j'ai vu du texte de débordement. Ce traitement de débordement n'est-il pas propre à IE ? Pourquoi IE6 ne fonctionne-t-il pas correctement ? Plus tard, j'ai vérifié en ligne et découvert qu'il s'avère qu'IE6 ne prend en charge le traitement de débordement que s'il est écrit dans un DIV, et IE6 ou supérieur ne prend en charge que l'écriture en

, j'ai donc écrit le même code de traitement de débordement dans DIV. et

C'est normal, transpire ! ! ! Voici une capture d'écran de mon traitement :
Ce qui suit est le code de la page html :

Ce qui suit est le rendu (ce sera le même après traitement) :

Voici le code pour les deux traitements de débordement ci-dessus :

Voici quelques méthodes de traitement sur Internet, qui méritent votre référence :

Texte général troncature (applicable à inline et block) : [www.mb5u.com]

.text-overflow {
display:block;
width:31em;
word-break:keep-all;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

Pour la définition du débordement de texte de tableau :
ww.m5u.com]

table{
width:30em;
table-layout:fixed;
}
td{
width:100%;
word-break:keep-all;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

Ce à quoi vous devez faire attention, c'est que ce truc ne fonctionne que sur une seule ligne de texte si vous souhaitez l'utiliser sur plusieurs. lignes, seule la première ligne fonctionnera. Seul IE aura "..." dans cette façon d'écrire. Dans les autres navigateurs, le texte sera masqué lorsqu'il dépassera la largeur spécifiée.

Étude approfondie du traitement de débordement de texte chinois dans Opera et Firefox :
[Problème]
Récemment, j'ai découvert qu'en naviguant sous Opera, la moitié droite de mon espace devient super large (j'utilise le même mode de composition que vous), de sorte qu'il dépasse la plage d'affichage de 1024 et qu'une barre de défilement horizontale apparaît lorsque la fenêtre est agrandie. Après avoir supprimé tous les modules selon la méthode que vous avez fournie, le problème persiste. là C'est tellement déroutant...
J'ai ouvert un nouvel espace avec un autre pass et utilisé la même disposition, mais il n'y a eu aucun problème sous Opera !
Est-ce parce que j'ai testé l'espace agrandi lors du test L'espace ? à droite, ainsi que l'ajout d'un deuxième module html [puis sa suppression] et d'autres opérations, ont gâché mon code spatial ?

[Raison]

Les problèmes de compatibilité avec différents navigateurs, pour être précis, sont des problèmes liés à l'implémentation des normes CSS par différents navigateurs Tout d'abord, sachez qu'Opera n'est pas le seul à afficher. anormalement, Firefox Non. Puisque Firefox est un navigateur standard reconnu [bien sûr, Opera aussi] et a une part de marché plus élevée, Firefox est utilisé pour la certification

[Exemple]

1. Firefox ne prend pas en charge l'attribut points de suspension (...), c'est-à-dire qu'une longue chaîne affichera des points de suspension text-overflow: ellipsis;
Ceci est dans l'option de journal. de la page d'édition du journal spatial Il existe une application Si vous entrez un nom de catégorie très long et revenez pour modifier le journal, vous constaterez que le nom de catégorie d'origine affichera la première partie dans IE, puis le remplacera directement par un Cependant, dans les navigateurs tels que Firefox, il s'affichera très longtemps jusqu'à ce qu'il éclate.

2 Dans Firefox, style="overflow:hidden"ne fonctionne qu'avec <. ;p> au lieu de ou

, etc.
3. Dans la partie lien fixe, le navigateur IE peut utiliser l'attribut word-wrap pour envelopper la chaîne qui dépasse la largeur. La longueur de l'adresse du lien fixe dépasse 300 px, il sera automatiquement renvoyé à la ligne .bvwordwrap{word-wrap:break-word;width:300px;left:0}
Et <.> dans les navigateurs comme Firefox, l'attribut word-wrap n'est pas reconnu car Cette propriété CSS n'est pas conforme au standard W3 et doit être remplacée par white-space:normal pour que les sauts de ligne puissent être corrects sous FireFox; et IE Notez également que les espaces entre les mots ne peuvent pas être utilisés pour remplacer, sinon le saut de ligne ne peut pas être correct.

[Connexe. recommandations]

1.

css résout le problème selon lequel le nombre de mots du texte dépasse l'affichage Méthodes de points de suspension... (texte sur une seule ligne, texte sur plusieurs lignes)

2.

Utilisez CSS pour résoudre le problème du dépassement du nombre de caractères dans l'affichage du titre

3

Tutoriel vidéo gratuit HTML en ligne.

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!