JavaScript+CSSで英単語の分割を実装する方法-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

JavaScript+CSSで英単語の分割を実装する方法

PHPz

Apr 26, 2023 am 10:33 AM

Web 開発では、コンテンツが長すぎて 1 行に収まらない状況がよく発生しますが、この問題を解決するにはハイフネーション技術を使用する必要があります。単語分割とは、現在の行幅に収まるように単語を適切な位置で分割することを指し、これにより単語のオーバーフローや見苦しいテキストレイアウトが回避されます。英語では通常、ハイフンはワードブレーカーを表すために使用され、英語ハイフンと呼ばれます。

この記事では、JavaScript と CSS を使用して英単語の分割を実現する 2 つの方法を紹介し、それぞれの長所、短所、適用可能なシナリオについて説明します。

1. css でハイフン属性を使用する

css3 では、単語の分割方法を制御するために新しいハイフン属性が追加されます。ハイフン属性は 3 つの値を受け入れます:

none: ハイフンなしを意味します;
manual: ハイフンの位置を手動で指定することを意味します;
auto: 自動識別を意味します単語をセグメント化します。

デフォルトでは、ハイフン属性はなしです。単語の分割は、自動または手動が指定されている場合にのみ有効です。ここでは、ハイフン属性の auto 値に焦点を当てます。

ハイフン属性を auto に設定すると、ブラウザは適切な位置で単語の分割を自動的に実行します。ただし、この属性は現在一部のブラウザでのみサポートされており、ブラウザごとに実装方法が異なります。

具体的には、Safari ベースのブラウザ (Safari や Chrome など) はハイフン属性を比較的包括的にサポートしていますが、フォントで対応する言語 (lang) 属性を設定し、HTML でテキストを指定する必要があります。 . 言語プロパティが適切に機能するようにします。 Edge や Firefox などのブラウザでは、この属性のサポートが不十分です。

以下は CSS コードの例です:

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

ログイン後にコピー

2. JavaScript を使用して英単語の分割を実現します

JavaScript を使用して英単語の分割を実現します。主に Hyphenator.js を使用します。図書館。 Hyphenator.js は、Liang アルゴリズムに基づいて英単語の単語分割を実装します。このアルゴリズムは、単語の連続性を保証するだけでなく、末尾のハイフンを回避し、フォントの形式に応じてハイフンの位置を自動的に調整します。

Hyphenator.js ライブラリの使用は非常に簡単で、対応する js および css ファイルを html に導入し、セグメント化する必要があるタグに class 属性を追加するだけです。

以下は 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>

ログイン後にコピー

CSS のハイフン属性と比較して、Hyphenator.js はより幅広いブラウザーをサポートし、フォントに基づいてハイフンの位置を自動的に調整できます。セグメンテーション効果という言葉の方が自然です。ただし、Hyphenator.js の使用にはいくつかの欠点もあります。追加の js ファイルを使用する必要があるため、ページのダウンロード時間が増加します。また、HTML 文字列を生成したり、ajax を通じてコンテンツを動的にロードしたりする場合、Hyphenator.js の機能を中断を達成するために再コールされました。

結論

この記事では、JavaScript と CSS を使用して英単語の分割を実現する 2 つの方法を紹介しますが、それぞれに長所と短所があり、使用する場合は実際の状況に応じて選択する必要があります。彼ら。

Hyphens 属性を使用する場合は、ブラウザーの互換性の問題に注意する必要があり、対応する言語属性の指定にも注意する必要があります。Hyphenator.js を使用する場合は、追加の js ファイルを導入する必要があるため、ページのダウンロード時間。

以上がJavaScript+CSSで英単語の分割を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。