javascript - 弾幕効果を模倣するときに発生するバグ
習慣沉默
習慣沉默 2017-06-30 09:58:38
0
2
810

位置決めを使用して模倣弾幕エフェクトを記述すると、エッジに触れるとすぐにバグが表示されます

CSS:

リーリー

JS:

リーリー

問題は、画面左側のテキストに触れるとすぐに弾幕が切れることです:

しかし、数字を入力するときはこのようなことは起こりません。固定幅を指定しなかったのですが、なぜこのようなことが起こるのかわかりません。

習慣沉默
習慣沉默

全員に返信 (2)
漂亮男人

これはブラウザによるテキスト処理の原理に関係しますが、下位層までは踏み込んでいませんが、大まかに次のように理解できます。
1. ブラウザ処理の区別基準は実際には複数の英単語です。 (間にスペースが入っています) 分離カウント (理由は下記を参照してください)) 画面からはみ出す場合、デザイナーの当初の意図は読みやすさであったと思われます。そのため、ブラウザーは英語の文字を囲むための分離基準としてスペースを使用します (ブラウザはスペースが区切られていると認識するため、これは単語です)。また、途中にスペースのない長い英字の文字列は単語全体として判断され、折り返されません。
2. 中国語を入力する際、ブラウザは各漢字を「単語」として判断するため、画面からはみ出た単語はすべて改行されます。
3. 数字の場合、ブラウザの認識規則は英語の文字と同じです。

要約すると、単語と数字の違いではなく、鍵はスペースにあります。たとえば、コード内でメッセージ = "777 777 777" をテストすると、数値の間にスペースがあることがわかります。数値であっても、ブラウザによって行が折り返されることがわかります。同様に、message = "cat cat cat" と "catcatcat" の違いをテストすることもできます。
最後に、white-space: nowrap 属性に戻ります。w3school によって与えられる意味は、「テキストは折り返されず、テキストは
タグに遭遇するまで同じ行に続く」ということです。これは説明できます。 . テキストを追加した後に折り返されないのはなぜですか?

いいねを押す+0
    typecho

    CSSプラスwhite-space: nowrap;

    いいねを押す+0
      最新のダウンロード
      詳細>
      ウェブエフェクト
      公式サイト
      サイト素材
      フロントエンドテンプレート
      私たちについて 免責事項 Sitemap
      PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!