Maison > interface Web > tutoriel HTML > le corps du texte

Implémentation de sauts de ligne forcés et de sauts de non-ligne dans div, td, p et autres conteneurs dans la production de pages html_HTML/Xhtml_Web

WBOY
Libérer: 2016-05-16 16:39:11
original
1528 Les gens l'ont consulté

1. Ne forcez aucun saut de ligne et terminez par des points de suspension.

Copier le code
Le code est le suivant :


Bonjour les amis, amis, amis, pourquoi ne puis-je pas voir l'effet ?


2. Retour à la ligne automatique CSS

Copier le code
Le code est le suivant :

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

3. CSS force le saut de ligne du mot anglais

Copier le code
Le code est le suivant :

div{word-break:break-all;}

Si les divs sont imbriqués, l'intérieur Si le div du calque s'enroule automatiquement en fonction du contenu, vous ne pouvez définir que la largeur du div externe et l'espace blanc:nowrap.

word-break:break-all et word-wrap:break-word permettent tous deux au contenu de conteneurs tels que DIV de s'enrouler automatiquement

La différence est :

1 , word-break:break-all Par exemple, si un div 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 tronquera 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 : Selon les règles textuelles des langues asiatiques et non asiatiques, autorisées dans 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.
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal