javascript - Pepijat yang ditemui semasa meniru kesan rentetan

Question

Menggunakan tulisan penentududukan untuk meniru kesan rentetan, pepijat akan muncul sebaik sahaja ia menyentuh tepi

CSS:

.dmMsg{
    position:absolute;
    display: inline-block;
    right:0;
    top:0;
    color:#fff;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    line-height: 1em;
    z-index: 100;
}

JS:

var $temp = $("<span class='" + msgType + " " + moveInType + "' data-count="+ msg_count +">" + message + "</span>");

$('.' + parent).append($temp);
    $temp.animate({
        'right':'100%'
    },15000,loop);
}

function loop(){
    $temp.css('right','-400px');
    $temp.animate({
        'right':'100%'
    },15000,loop);
}

Masalahnya ialah rentetan pecah sebaik sahaja ia menyentuh teks di sebelah kiri skrin:

Tetapi ini tidak akan berlaku apabila saya tidak memberikan lebar tetap. Saya tidak tahu mengapa ini berlaku.

Answer 1

Ini berkaitan dengan prinsip pemprosesan teks oleh penyemak imbas Ia tidak masuk ke lapisan bawah, tetapi ia boleh difahami secara kasar seperti ini:
1 Standard yang membezakan untuk pemprosesan pelayar sebenarnya ialah perkataan Bahasa Inggeris ditemui (dengan ruang di antara) Kiraan pemisahan (lihat di bawah untuk sebabnya)) Apabila melimpahi skrin, saya rasa niat asal pereka bentuk adalah untuk memudahkan pembacaan, jadi penyemak imbas akan menggunakan ruang sebagai piawaian pemisahan untuk membungkus huruf Inggeris ( kerana penyemak imbas berpendapat bahawa ruang dipisahkan, ini ialah A word), dan rentetan panjang huruf Inggeris tanpa ruang di tengah akan dinilai sebagai keseluruhan perkataan dan tidak akan dibalut.
2 Apabila memasukkan bahasa Cina, penyemak imbas akan menilai setiap aksara Cina sebagai "perkataan", jadi setiap perkataan yang melimpahi skrin akan dibalut baris.
3 Untuk nombor, peraturan pengecaman penyemak imbas adalah sama dengan huruf Inggeris.

Jadi untuk meringkaskan, ini bukan perbezaan antara perkataan dan nombor, kuncinya terletak pada ruang. Sebagai contoh, anda boleh menguji mesej = "777 777 777" dalam kod anda, iaitu, terdapat ruang antara nombor Anda akan mendapati bahawa walaupun ia adalah nombor, penyemak imbas akan membungkus baris. Dengan cara yang sama, anda juga boleh menguji perbezaan antara mesej = "kucing kucing kucing" dan "kucing kucing".
Akhirnya, mari kita kembali ke atribut white-space: nowrap Maksud yang diberikan oleh w3school ialah “teks tidak akan dibalut, dan teks akan diteruskan pada baris yang sama sehingga ia menemui teg <br> boleh dijelaskan Mengapa teks tidak dibalut selepas menambahnya?

Answer 2

css pluswhite-space: nowrap;