84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
位置決めを使用して模倣弾幕エフェクトを記述すると、エッジに触れるとすぐにバグが表示されます
CSS:
JS:
問題は、画面左側のテキストに触れるとすぐに弾幕が切れることです:
しかし、数字を入力するときはこのようなことは起こりません。固定幅を指定しなかったのですが、なぜこのようなことが起こるのかわかりません。
これはブラウザによるテキスト処理の原理に関係しますが、下位層までは踏み込んでいませんが、大まかに次のように理解できます。1. ブラウザ処理の区別基準は実際には複数の英単語です。 (間にスペースが入っています) 分離カウント (理由は下記を参照してください)) 画面からはみ出す場合、デザイナーの当初の意図は読みやすさであったと思われます。そのため、ブラウザーは英語の文字を囲むための分離基準としてスペースを使用します (ブラウザはスペースが区切られていると認識するため、これは単語です)。また、途中にスペースのない長い英字の文字列は単語全体として判断され、折り返されません。2. 中国語を入力する際、ブラウザは各漢字を「単語」として判断するため、画面からはみ出た単語はすべて改行されます。3. 数字の場合、ブラウザの認識規則は英語の文字と同じです。
要約すると、単語と数字の違いではなく、鍵はスペースにあります。たとえば、コード内でメッセージ = "777 777 777" をテストすると、数値の間にスペースがあることがわかります。数値であっても、ブラウザによって行が折り返されることがわかります。同様に、message = "cat cat cat" と "catcatcat" の違いをテストすることもできます。最後に、white-space: nowrap 属性に戻ります。w3school によって与えられる意味は、「テキストは折り返されず、テキストは タグに遭遇するまで同じ行に続く」ということです。これは説明できます。 . テキストを追加した後に折り返されないのはなぜですか?
CSSプラスwhite-space: nowrap;
white-space: nowrap;
これはブラウザによるテキスト処理の原理に関係しますが、下位層までは踏み込んでいませんが、大まかに次のように理解できます。
1. ブラウザ処理の区別基準は実際には複数の英単語です。 (間にスペースが入っています) 分離カウント (理由は下記を参照してください)) 画面からはみ出す場合、デザイナーの当初の意図は読みやすさであったと思われます。そのため、ブラウザーは英語の文字を囲むための分離基準としてスペースを使用します (ブラウザはスペースが区切られていると認識するため、これは単語です)。また、途中にスペースのない長い英字の文字列は単語全体として判断され、折り返されません。
2. 中国語を入力する際、ブラウザは各漢字を「単語」として判断するため、画面からはみ出た単語はすべて改行されます。
3. 数字の場合、ブラウザの認識規則は英語の文字と同じです。
要約すると、単語と数字の違いではなく、鍵はスペースにあります。たとえば、コード内でメッセージ = "777 777 777" をテストすると、数値の間にスペースがあることがわかります。数値であっても、ブラウザによって行が折り返されることがわかります。同様に、message = "cat cat cat" と "catcatcat" の違いをテストすることもできます。
最後に、white-space: nowrap 属性に戻ります。w3school によって与えられる意味は、「テキストは折り返されず、テキストは
タグに遭遇するまで同じ行に続く」ということです。これは説明できます。 . テキストを追加した後に折り返されないのはなぜですか?
CSSプラス
white-space: nowrap;