pLes balises sont automatiquement renvoyées à la ligne par défaut, donc après avoir défini la largeur, l'effet peut être obtenu correctement. Cependant, dans un projet récent, il a été constaté qu'après le chargement des données avec ajax,ple contenu à l'intérieur de la balise ne passait pas à la ligne, ce qui causait une confusion de mise en page. J'ai donc essayé d'utiliser le style de saut de ligne. Bien que cela ait résolu le problème, je n'ai pas découvert la cause profonde. L'essentiel est que les données que j'avais obtenues à ce moment-là étaient une longue chaîne de chiffres. Le navigateur traite les chiffres et les mots anglais de manière similaire et ne les tronquera pas.

Donnez d'abord les différentes méthodes, puis présentez chaque propriété en détail.

Interdiction forcée du retour à la ligne :

p { white-space:nowrap; }

Retour à la ligne automatique :

p { word-wrap:break-word; }

Forcer la coupure des mots anglais :

p { word-break:break-all; }

Remarque :Pour forcer la coupure des mots anglais, vous devez définir l'élément inline comme un élément de niveau bloc.

Le débordement affiche des points de suspension :

p{text-overflow:ellipsis;overflow:hidden;}

white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit; 

• white-space: La propriété définit comment gérer les espaces blancs à l'intérieur d'un élément.
• normal: Par défaut. Les espaces blancs sont ignorés par le navigateur.
• pre: Les espaces blancs sont préservés par le navigateur. Il se comporte de manière similaire à la balise pre en HTML.
• nowrap: Le texte ne passe pas à la ligne ; il continue sur la même ligne jusqu'à ce qu'il rencontre une balise br.
• pre-wrap: Préserve la séquence des caractères d'espacement, mais effectue normalement les retours à la ligne.
• pre-line: Fusionne les séquences de caractères d'espacement, mais conserve les caractères de saut de ligne.
• inherit: Spécifie que la valeur de la propriété white-space doit être héritée de l'élément parent.

word-wrap: normal|break-word; 

• word-wrap: La propriété est utilisée pour indiquer si le navigateur est autorisé à couper les mots à l'intérieur d'un mot. Cela permet d'éviter le débordement lorsqu'une chaîne est trop longue pour trouver son point de coupure naturel.
• normal: Coupe les lignes uniquement aux points de coupure autorisés (le navigateur conserve la gestion par défaut).
• break-word: Coupe les lignes à l'intérieur des mots longs ou des adresses URL.

word-break: normal|break-all|keep-all;

• La propriété word-break est utilisée pour indiquer comment couper les mots à l'intérieur d'un mot.
• normal: Utilise les règles de saut de ligne par défaut du navigateur.
• break-all: Autorise les sauts de ligne à l'intérieur des mots.
• keep-all: Ne peut couper qu'aux espaces à demi-largeur ou aux traits d'union.