recherche
Maisoninterface Webtutoriel HTML浅析word-break work-wrap区别

word-break:【断词】

定义:规定自动换行的处理方法.   注:通过word-break使用,可以实现让浏览器在任意位置换行。

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

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

 

 

 

 

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

 

 

 

 

兼容性:

举个栗子:

<span class="text-s">iIanishttp://3iuiuskjfksjj.com/test_abjcljlj/?daydayupdadyda=dayayupupdaalurupsjlsjfljlsfjljljouwrouowurouorwurouurowurouwruwouour</span>
.text-s {
    display: inline-block;
    width: 240px;
    // word-break: keep-all;
}

未设置word-break:

 

设置word-break:break-all;

 

设置word-break:keep-all;或者word-break:normal;

 

word-wrap:【换行】

 定义:允许长单词或 URL 地址换行到下一行。

语法:word-wrap: normal|break-word;

默认值: normal
继承性: yes
版本: CSS3
JavaScript 语法:

object.style.wordWrap="break-word"

 

 

 

 

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

 

 

 

兼容性:

举个栗子:【和上面一样】

未设置word-wrap:

 

 

设置word-wrap:normal;

 

设置word-wrap:break-word;

 

对比上述栗子设置word-break:break-all;和word-wrap:break-word的差别

 

总结:

word-break:当行尾放不下一个单词时,决定单词内部怎么摆放 => 决定句子末尾放不下单词时,单词是否换行

    break-all:强行摆放,挤不下剩下的就换下一行显示。

    keep-all:放不下,就另外起一行展示;如果还放不下就溢出显示。

word-wrap:当行尾放不下时,决定单词内是否允许换行 => 决定单词内该怎么换行

    normal:单词太长,换行显示,在超过一行就溢出显示。

    break-word:当单词太长时,先尝试换行;换行后还是太长,单词内还可以换行

 

 

附加一个:文字两端对齐

属性:text-align:justify;

兼容性:十分不好

 

text-align:center;

text-align:justify;

 

参考博文:http://www.alloyteam.com/2016/05/css-word-for-word-breaker-do-you-really-understand/

 

 

 

 

 

Déclaration
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
Du texte aux sites Web: la puissance de HTMLDu texte aux sites Web: la puissance de HTMLApr 13, 2025 am 12:07 AM

HTML est un langage utilisé pour créer des pages Web, définissant la structure des pages Web et le contenu via des balises et des attributs. 1) HTML organise la structure des documents via des balises, telles que. 2) Le navigateur analyse HTML pour construire le DOM et rend la page Web. 3) De nouvelles caractéristiques de HTML5, telles que, améliorez les fonctions multimédias. 4) Les erreurs courantes incluent des étiquettes non clôturées et des valeurs d'attribut non attribuées. 5) Les suggestions d'optimisation incluent l'utilisation de balises sémantiques et la réduction de la taille du fichier.

Comprendre HTML, CSS et JavaScript: un guide pour débutantComprendre HTML, CSS et JavaScript: un guide pour débutantApr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

Le rôle de HTML: Structurer le contenu WebLe rôle de HTML: Structurer le contenu WebApr 11, 2025 am 12:12 AM

Le rôle de HTML est de définir la structure et le contenu d'une page Web via des balises et des attributs. 1. HTML organise le contenu via des balises telles que, ce qui le rend facile à lire et à comprendre. 2. Utilisez des balises sémantiques telles que, etc. pour améliorer l'accessibilité et le référencement. 3. Optimisation du code HTML peut améliorer la vitesse de chargement des pages Web et l'expérience utilisateur.

HTML et code: un examen plus approfondi de la terminologieHTML et code: un examen plus approfondi de la terminologieApr 10, 2025 am 09:28 AM

Htmlisaspecificypeofcodefocusedonconstructringwebcontent, tandis que "code" en général incluse les langues liés à lajavaScriptandpythonforfonctionnality.1) htmldefineswebpagestructureusingtags.2) "Code" enclueSawidererRangeFlanguageForgicandInteract "

HTML, CSS et JavaScript: outils essentiels pour les développeurs WebHTML, CSS et JavaScript: outils essentiels pour les développeurs WebApr 09, 2025 am 12:12 AM

HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.

Les rôles de HTML, CSS et JavaScript: responsabilités de baseLes rôles de HTML, CSS et JavaScript: responsabilités de baseApr 08, 2025 pm 07:05 PM

HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

HTML est-il facile à apprendre pour les débutants?HTML est-il facile à apprendre pour les débutants?Apr 07, 2025 am 12:11 AM

HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.

Quel est un exemple d'une balise de départ dans HTML?Quel est un exemple d'une balise de départ dans HTML?Apr 06, 2025 am 12:04 AM

Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Version Mac de WebStorm

Version Mac de WebStorm

Outils de développement JavaScript utiles

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Dreamweaver Mac

Dreamweaver Mac

Outils de développement Web visuel

mPDF

mPDF

mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) ​​et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),

Télécharger la version Mac de l'éditeur Atom

Télécharger la version Mac de l'éditeur Atom

L'éditeur open source le plus populaire