Comment implémenter des sauts de ligne forcés ou des sauts de ligne dans div, td, p et autres conteneurs en HTML

Les sauts de ligne forcés ou aucun saut de ligne dans p, td, p et d'autres conteneurs sont assez pratiques dans certains cas. L'article suivant a compilé des connaissances pertinentes et propose des méthodes d'implémentation spécifiques. Les amis qui en ont besoin peuvent s'y référer. 1. Ne forcez aucun saut de ligne et terminez par des points de suspension.

Le code est le suivant :

<p style="width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" > 
你好朋友朋友朋友我为什么不能看到效果啊 
</p>

2. Retour à la ligne automatique CSS

Le code est le suivant :

p{ word-wrap: break-word; word-break: normal; }

3. Le code CSS force le saut de ligne du mot anglais

est le suivant :

p{word-break:break-all;}

Si p est imbriqué et que vous souhaitez pour que le p interne s'enroule automatiquement en fonction du contenu, vous pouvez simplement définir la largeur p du calque externe peut être définie sur white-spance:nowrap.

word-break:break-all et word-wrap:break-word permettent tous deux au contenu de son conteneur tel que p de s'enrouler automatiquement.

Leur différence est :

1, word-break:break-all Par exemple, si p fait 200 px de large, son contenu sera automatiquement renvoyé à 200 px. S'il y a un long mot anglais à la fin de la ligne (félicitations, etc.), il sera tronqué. le mot et transformez-le en ligne. La fin est conra (la partie frontale de la félicitation), et la ligne suivante est la partie back-end de la tulation (conguatulation).

2. L'exemple word-wrap:break-word est le même que ci-dessus, mais la différence est qu'il félicitera le mot entier dans son ensemble si la fin de la ligne n'est pas assez large pour s'afficher. le mot entier, il félicitera automatiquement le mot entier. Mettez-le sur la ligne suivante sans tronquer le mot.

3, word-break;break-all Version prise en charge : IE5 ou supérieure Ce comportement est le même que celui normal dans 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.

WORD-WRAP:break-word Version prise en charge : IE5.5 ou supérieure Le contenu sera enveloppé dans les limites.

Si nécessaire, une coupure de mot se produira également. La table s'enroule automatiquement pour éviter de s'étirer.

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

Paramètres :

normal : conformément aux règles de texte des langues asiatiques et non asiatiques, autorisé dans les mots Saut de ligne

break-all : ce 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 : Identique à la normale pour toutes les langues non asiatiques. Pour le chinois, le coréen et le japonais, les sauts de mots ne sont pas autorisés. Syntaxe adaptée au texte non asiatique contenant une petite quantité de texte asiatique :

word-wrap : normal | break-word

Paramètres :

normal : autoriser le contenu à briser les limites spécifiées du conteneur

break-word : Le contenu sera brisé dans 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 de

est wordWrap. Veuillez consulter les autres livres que j'ai écrits. Syntaxe : table-layout : auto | fixed Paramètres : 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. Correction très lente : algorithme de mise en page fixe. Dans cet algorithme, la disposition horizontale est basée uniquement 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. ou récupérer l'algorithme de disposition du tableau. L'attribut de script correspondant est tableLayout.

Suggestion : la détection 3C des sauts de mots affichera des problèmes, ce qui entraînera également des problèmes dans les instantanés Baidu - cet attribut du navigateur OPERA FIREFOX ne prend pas en charge l'attribut de saut de mots et peut être remplacé par white-space:normal ; , afin que les sauts de ligne puissent être corrects sous FireFox et IE, et il convient de noter que les espaces entre les mots ne peuvent pas être utilisés pour les remplacer, sinon les sauts de ligne ne seront pas corrects.

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!