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

Une introduction aux différences entre le work-wrap avec coupure de mots

高洛峰
Libérer: 2017-03-04 10:29:22
original
1634 Les gens l'ont consulté

word-break : 【Word Break】

Définition : Spécifie la méthode de traitement du retour à la ligne automatique Remarque : En utilisant le saut de mot, vous pouvez créer le navigateur. changer la ligne à tout moment Retour à la position.

Grammaire : coupure de mots : normal|break-all|keep-all;

默认值 normal
继承性 yes
版本 css3
Javascript语法 object.style.wordBreak="keep-all"

描述
normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。


Compatibilité :

word-break work-wrap的区别示例介绍

Par exemple :

<span class="text-s">iIanishttp://www.php.cn/;/span>    
.text-s {    
    display: inline-block;    
    width: 240px;    
    // word-break: keep-all;    
}
Copier après la connexion

le saut de mot n'est pas défini :

word-break work-wrap的区别示例介绍

le saut de mot est défini : break-all;

word-break work-wrap的区别示例介绍

Définissez word-break:keep-all; ou word-break:normal;

word-break work-wrap的区别示例介绍

word-wrap : 【Line Wrap】

Définition : permettre aux mots longs ou aux adresses URL de passer à la ligne suivante.

Syntaxe : word-wrap : normal|break-word;

Valeur par défaut : normal
Héritage : oui
Version : CSS3
Syntaxe JavaScript :
默认值: normal
继承性: yes
版本: CSS3
JavaScript 语法:

object.style.wordWrap="break-word"

style objet. .wordWrap="break-word"


描述
normal 只在允许的断字点换行(浏览器保持默认处理)。
break-word 在长单词或 URL 地址内部进行换行。

Compatibilité :

word-break work-wrap的区别示例介绍

Par exemple : [Identique à ci-dessus]

Le retour à la ligne n'est pas défini :

word-break work-wrap的区别示例介绍

Le retour à la ligne est défini : normal ;

word-break work-wrap的区别示例介绍

Définir word-wrap:break-word;

word-break work-wrap的区别示例介绍

Comparez le réglage marron ci-dessus word La différence entre -break:break-all; et word-wrap:break-word

word-break work-wrap的区别示例介绍

Résumé :

saut de mot : lorsqu'un mot ne peut pas être placé à la fin de la ligne, déterminez comment placer le mot à l'intérieur => Déterminez si le mot sera divisé en une nouvelle ligne lorsque le mot ne le peut pas. être placé à la fin de la phrase

break-all : Placez-le de force Si les éléments restants ne peuvent pas être insérés, ils seront affichés sur la ligne suivante.

keep-all : S'il ne peut pas rentrer, affichez-le sur une autre ligne ; s'il ne peut toujours pas rentrer, il affichera un débordement.

retour à la ligne : lorsque la fin de la ligne ne peut pas tenir, décidez si vous souhaitez autoriser le retour à la ligne dans le mot => Déterminez comment envelopper le mot dans le mot

normal : le mot est trop long et le mot sera enveloppé dans une nouvelle ligne. S'il y a plus d'une ligne, il affichera un débordement.

break-word : Lorsque le mot est trop long, essayez d'abord de l'envelopper ; s'il est encore trop long après le retour à la ligne, vous pouvez également envelopper le mot .

Un supplémentaire : aligner le texte aux deux extrémités

Attribut : text-align:justify;

Compatibilité : Très mauvaise

word-break work-wrap的区别示例介绍

text-align:center;

word-break work-wrap的区别示例介绍

text-align:justify;

word-break work-wrap的区别示例介绍

La brève analyse ci-dessus de la différence entre le work-wrap word-break est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'exemples de la différence entre le work-wrap avec coupure de mots et les articles connexes, veuillez faire attention au site Web PHP chinois !

É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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!