recherche

Maison  >  Article  >  interface Web  >  Comment implémenter la segmentation des mots anglais avec javascript+css

Comment implémenter la segmentation des mots anglais avec javascript+css

PHPz
PHPzoriginal
2023-04-26 10:33:39812parcourir

Dans le développement Web, nous rencontrons souvent des situations où le contenu est trop long et ne peut pas être entièrement affiché sur une seule ligne. À l'heure actuelle, nous devons utiliser la technologie de césure pour résoudre ce problème. Le cassage de mots fait référence au fractionnement d'un mot à la position appropriée pour l'adapter à la largeur de ligne actuelle, évitant ainsi le débordement de mots ou la disposition du texte laide. En anglais, les traits d'union sont généralement utilisés pour représenter les séparateurs de mots, appelés traits d'union anglais.

Cet article présentera deux méthodes d'utilisation de JavaScript et CSS pour réaliser la segmentation des mots anglais, et discutera de leurs avantages, inconvénients et scénarios applicables.

1. Utilisez l'attribut Hyphens en CSS

En CSS3, un nouvel attribut Hyphens est ajouté pour contrôler la manière de segmentation des mots. L'attribut Traits d'union accepte trois valeurs :

  • none : signifie aucune segmentation de mot ;
  • manual : signifie spécifier manuellement la position de segmentation des mots ; 🎜🎜#auto : signifie reconnaissance automatique et segmentation des mots.
  • Par défaut, l'attribut Traits d'union est aucun. La segmentation des mots ne prendra effet que lorsque auto ou manuel est spécifié. Ici, nous nous concentrerons sur la valeur automatique de l’attribut Hyphens.

Après avoir défini l'attribut Traits d'union sur auto, le navigateur segmentera automatiquement les mots à l'emplacement approprié. Cependant, cet attribut n'est actuellement pris en charge que par certains navigateurs, et différents navigateurs l'implémentent différemment.

Plus précisément, les navigateurs basés sur Safari (tels que Safari et Chrome) prennent en charge de manière relativement complète l'attribut Traits d'union, mais l'attribut de langue (lang) correspondant doit être défini dans la police et spécifié dans le code HTML. Les propriétés linguistiques du texte sont nécessaires pour fonctionner correctement. Les navigateurs tels que Edge et Firefox prennent faiblement en charge cet attribut.

Ce qui suit est un exemple de code CSS : 

p {
    font-size: 16px;
    -webkit-hyphens: auto; /* Safari内核浏览器 */
    -ms-hyphens: auto; /* Edge浏览器 */
    hyphens: auto;
}

2. Utilisez javascript pour réaliser la segmentation des mots anglais

Utilisez javascript pour réaliser la segmentation des mots anglais, La bibliothèque Hyphenator.js est principalement utilisée. Hyphenator.js implémente la segmentation de mots anglais basée sur l'algorithme de Liang. Cet algorithme peut non seulement assurer la continuité des mots, mais aussi éviter les traits d'union à la fin. Il peut également ajuster automatiquement la position des traits d'union en fonction du format de la police.

La bibliothèque Hyphenator.js est très simple à utiliser. Il vous suffit d'introduire les fichiers js et css correspondants en html et d'ajouter l'attribut class aux balises qui doivent être segmentées.

Ce qui suit est un exemple de code javascript : 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hyphenator.js示例</title>
        <!-- 引入Hyphenator.js的js和css文件 -->
        <script src="Hyphenator.js"></script>
        <link rel="stylesheet" href="Hyphenator.css">
        <style>
            .content {
                font-size:16px;
                width:200px; /* 宽度为200px */
                border: 1px solid #ccc;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <!-- 带有断词效果的文字 -->
        <div class="content hyphenate">This is an example of using Hyphenator.js to hyphenate words properly.</div>

        <!-- 初始化 -->
        <script>
            Hyphenator.config({
                displaytogglebox:true, /* 显示开关按钮 */
                classname: 'hyphenate', /* 断词class名称 */
                hyphenchar: '-', /* 连字符为- */
                language: 'en-us', /* 使用英文断词 */
                minwordlength : 4 /* 最小断词长度为4 */
            });
            Hyphenator.run();
        </script>
    </body>
</html>

Comparé à la propriété Hyphens en CSS, Hyphenator.js prend en charge un navigateur plus large et est capable de s'ajuster automatiquement en fonction des polices. la position du trait d'union rend l'effet de segmentation des mots plus naturel. Cependant, l'utilisation de Hyphenator.js présente également certains inconvénients. Elle nécessite l'utilisation de fichiers js supplémentaires, ce qui augmente le temps de téléchargement de la page et lors de la génération de chaînes HTML ou du chargement dynamique de contenu via ajax, les fonctions de Hyphenator.js doivent être améliorées. rappelé pour obtenir un mot d'interruption.

Conclusion

Cet article présente deux méthodes d'utilisation de javascript et de css pour réaliser la segmentation des mots anglais. Chacune d'entre elles présente des avantages et des inconvénients, et vous devez choisir en fonction de ceux-ci. situation réelle lors de leur utilisation.

Lorsque vous utilisez les attributs Hyphens, vous devez faire attention aux problèmes de compatibilité du navigateur, et également faire attention à la spécification des attributs de langue correspondants lors de l'utilisation de Hyphenator.js, vous devez introduire des fichiers js supplémentaires, ce qui augmente ; le temps de téléchargement de la page.

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!

JavaScript firefox css ajax chrome safari css3 html edge auto 字符串 class JS 算法
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
Article précédent：Comment utiliser les fonctions personnalisées en javascriptArticle suivant：Comment utiliser les fonctions personnalisées en javascript

Articles Liés

Voir plus