1. Vous définissez la largeur du tableau, c'est-à-dire que vous donnez au tableau une valeur de largeur (une valeur numérique, pas un pourcentage)
2. Forcer à ne pas envelopper
div{
//espace blanc : pas de retour à la ligne ; valeur par défaut normale ; nowrap force tout le texte à être affiché sur la même ligne jusqu'à ce que le texte se termine ou qu'un objet br soit rencontré.
espace blanc:nowrap;
Envelopper automatiquement
div{
word-wrap : break-word ;
//word-break définit des sauts de ligne forcés ; les règles de texte normales pour les langues asiatiques et non asiatiques, autorisant les sauts de ligne dans les mots.
saut de mot : normal ;
}
Forcer le saut de ligne du mot anglais
div{
mot-break:break-all;
}
3. Pour résumer, tant que les phrases suivantes sont définies en CSS, il peut être garanti que la page Web ne sera pas rouverte.
table{table-layout : corrigé ;}
td(word-break: break-all; word-wrap:break-word;)
Commentaires :
1. Le premier tableau{table-layout:fixed;}, ce style peut faire en sorte que le tableau ait !!!(point d'exclamation) automatiquement envelopper les caractères.
2.td{word-break: break-all}, en général, vous pouvez utiliser cette phrase, mais dans certains cas particuliers, elle sera toujours interrompue, vous devez donc ajouter la phrase suivante (word-wrap: break-word ;) Cela peut être résolu. Ce style permet à certains mots anglais consécutifs du tableau de s'enrouler automatiquement.
http://www.knowsky.com/
(1) Grammaire :
saut de mot : normal | break-all | keep-all
Paramètres :
normal : selon les règles textuelles des langues asiatiques et non asiatiques, les sauts de ligne dans les mots sont autorisés
break-all : Le comportement est le même que celui normal pour les langues asiatiques. Les sauts dans n'importe quel mot d'une ligne de texte en langue non asiatique sont également autorisés. Cette valeur convient au texte asiatique contenant du texte non asiatique.
keep-all : Idem que d'habitude pour toutes les langues non asiatiques. Pour le chinois, le coréen et le japonais, les sauts de mots ne sont pas autorisés. Convient au texte non asiatique contenant une petite quantité de texte asiatique
(2) Syntaxe :
retour à la ligne : normal |
paramètres de coupure de mot :
normal : autoriser le contenu à dépasser la limite spécifiée du conteneur
break-word : le contenu dépassera les limites. Si nécessaire, un saut de mot se produit également.
Description :
définit ou récupère s'il faut couper la ligne lorsque la ligne actuelle dépasse la limite du conteneur spécifié.
La fonctionnalité de script correspondante est le retour à la ligne. Veuillez consulter les autres livres que j'ai écrits.
(3) Syntaxe :
table-layout : auto |
paramètres fixes :
auto : algorithme automatique par défaut. La disposition sera basée sur le contenu de chaque cellule. Le tableau ne sera pas affiché tant que chaque cellule n'aura pas été lue et calculée. Très lent
fixe : algorithme de mise en page fixe. Dans cet algorithme, la disposition horizontale est uniquement basée sur la largeur du tableau, la largeur de la bordure du tableau, l'espacement des cellules et la largeur des colonnes, et n'a rien à voir avec le contenu du tableau
:
Comment faire en sorte que la table s'enroule automatiquement ?
Définit ou récupère l'algorithme de disposition du tableau.
L'attribut de script correspondant est tableLayout.
4. Selon la plupart des articles sur Internet, ajoutez simplement :
code
.......
Code :
tableau {
table-layout:fixed;word-break:break-all;word-wrap:break-word;}
div{word-break:break-all;word-wrap:break-word;}
Cela peut résoudre le problème des tables et des calques cassés. C'est ce que j'ai fait au début. Cependant, un tel code posera un problème. Vous constaterez que tous les mots anglais sont tronqués, ce qui n'est pas conforme aux habitudes d'écriture de l'anglais et n'est pas propice à la lecture.
Plus tard, j'ai découvert qu'en réécrivant le code ci-dessus, je pouvais empêcher les tables/couches de se briser et les mots de se briser.
comme suit:
CodeCode
:
tableau {
disposition de la table : corrigé ;
retour à la ligne : pause-mot ;
}
div{
retour à la ligne : pause-mot ;
}
C'est aussi le code que j'utilise maintenant.