Comment ajouter une fonction de points de suspension dans le tableau

Cette fois, je vais vous montrer comment ajouter la fonction points de suspension dans le tableau. Quelles sont les précautions à prendre pour ajouter la fonction points de suspension dans le tableau ?

1. Cause

Après avoir reçu une demande, il a été dit que s'il y avait trop de mots dans le tableau, il fallait utiliser des points de suspension. Il est naturel de penser à un débordement de texte : points de suspension. (, remarque : overflow : caché ; text- overflow :ellipsis ; white-space:nowrap doivent être utilisés ensemble), mais cela ne fonctionne pas dans le tableau. Baidu a immédiatement déclaré que pour fonctionner, vous devez définir la disposition du tableau. : fixé à l'élément table, et cela a fonctionné.

2. Condition préalable pour que text-overflow:ellipsis fonctionne

Assurez-vous de définir la largeur du conteneur (souligné)

Si overflow: Hidden est manquant ; le texte sera étiré horizontalement Facile à l'extérieur

Si white-space:nowrap; text est manquant, la hauteur du conteneur sera poussée vers le bas même si vous définissez la hauteur, les ellipses n'apparaîtront pas et le texte en excès ; sera coupé

Si text-overflow:ellipsis; est manquant, le texte en excès sera coupé, ce qui équivaut à définir text-overflow:clip

3. point clé ci-dessus

Assurez-vous de définir la largeur du conteneur. C'est pourquoi table-layout: fixed fonctionne, mais table-layout: auto (l'élément de table est par défaut auto) ne fonctionne pas. de la spécification de la version chinoise CSS2.1 :

'table-layout'
Valeur : auto | ' éléments
Hérité : non
Pourcentages : N/A
Médias : visuel
Valeur calculée : identique à la valeur spécifiée

L'attribut 'table-layout' contrôle l'algorithme utilisé pour la disposition des cellules, des lignes et des colonnes du tableau. La signification de la valeur est la suivante :

fixed : Utiliser un algorithme de disposition de table fixe

auto : Utiliser n'importe quel algorithme de disposition de table automatique

(La différence entre fix et auto est que l'un est fixe et le l'autre est automatique)

Suivant Ces deux algorithmes sont décrits :

Dans l'algorithme de disposition de table fixe (fixed), la largeur de chaque colonne est déterminée par les règles suivantes :

Une colonne dont la valeur de l'attribut width n'est pas 'auto'. La largeur de la colonne où se trouve l'élément est définie sur la valeur width

Sinon, la largeur de la colonne est déterminée par les cellules de la première. ligne dont la valeur de l'attribut width n'est pas « auto ». Si la cellule s'étend sur plusieurs colonnes, la largeur est divisée sur les colonnes

Toutes les colonnes restantes sont divisées également entre l'espace de table horizontal restant (moins les bordures ou l'espacement des cellules)

Comme mentionné en 3, toutes les colonnes restantes divisent également l'espace horizontal restant du tableau. La situation réelle est que le tableau divise la largeur des colonnes restantes de manière égale, et la largeur fixe de chaque colonne est la largeur restante/le nombre de colonnes restantes, le débordement de texte est la condition préalable. :points de suspension pour fonctionner, c'est que la largeur du conteneur doit être définie, donc les travaux fixes

Dans l'algorithme de disposition automatique des tableaux (fixes), la largeur des colonnes est déterminée par les étapes suivantes :

Calculez chaque largeur minimale de contenu (MCW) des cellules : le contenu formaté peut s'étendre sur n'importe quel nombre de lignes, mais ne peut pas déborder de la cellule. Si la « largeur » spécifiée de la cellule (W) est supérieure à MCW, W est la largeur minimale de la cellule. La valeur 'auto' indique que le MCW est la largeur minimale de cellule. Ensuite, la largeur "maximale" de chaque cellule est calculée : formatez le contenu, quels que soient les sauts de ligne autres que les sauts de ligne explicites

Pour chaque colonne. , à partir de juste Détermine une largeur de colonne maximale et minimale parmi les cellules couvrant la colonne. La largeur de colonne minimale est la largeur de colonne minimale requise, selon la plus grande des largeurs de cellule minimales (ou la « largeur » de colonne, selon la valeur la plus grande). La largeur maximale de colonne est la largeur maximale de colonne requise pour la plus grande des largeurs maximales de cellule (ou la « largeur » de colonne, selon la valeur la plus grande)

Pour chaque cellule qui s'étend sur plusieurs colonnes, augmentez la largeur minimale de la colonnes, ce qui les rend au moins aussi larges que les cellules. Il en va de même pour la largeur maximale. Si possible, élargissez toutes les colonnes étendues à environ la même largeur

Pour chaque élément de groupe de colonnes dont la « largeur » n'est pas « auto », augmentez la largeur minimale des colonnes qu'il s'étend afin qu'elles soient au moins aussi larges. car La « largeur » du groupe de colonnes est la même largeur

En fait, certaines choses sont très simples, mais en parler est déroutant. . .

Comme mentionné en 1, si la « largeur » (W) spécifiée par la cellule est supérieure à MCW, W est la largeur minimale de la cellule. La valeur « auto » indique que MCW est la largeur minimale de cellule.

**Cas 1 : lorsque W > MCW, W est la largeur minimale de cellule, indiquant que la largeur de la colonne = W, la largeur de la colonne peut accueillir du texte et aucune ellipse n'est nécessaire.

Cas 2 : Lorsque W **
Si vous souhaitez utiliser des points de suspension sans utiliser table-layout:fixed, c'est-à-dire sous le principe de table-layout:auto, vous pouvez procéder comme suit (définir un autre élément dans td et en ajouter un autre élément à cet élément Définition des points de suspension)

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

<style>div {  width: 100px;
}.ellipsis {  text-overflow:ellipsis;  overflow: hidden; 
  text-overflow:ellipsis; 
  white-space:nowrap;
}</style>...<td>
  <div class="ellipsis">
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  </div></td>...

Lecture connexe :

Comment utiliser le pseudo-élément première lettre pour mettre en majuscule la première lettre du texte

Détaillé explication de l'attribut Counters du CSS

Explication détaillée de la surcharge de fonctions en JavaScript

Comment les données front-end et back-end doivent interagir scientifiquement

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!