javascript - 弾幕効果を模倣するときに発生するバグ

Question

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

CSS：

リーリー

JS：

リーリー

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

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

Answer 1

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

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

Answer 2

CSSプラスwhite-space: nowrap;