javascript - 仿彈幕效果遇到的bug
問題描述
利用定位寫的仿彈幕效果,一碰到邊緣就出現bug
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);}
問題是彈幕只要碰到屏幕左邊文字就折行了:
但是輸入數字就不會這樣,我沒有給固定寬度,不知道為什么會這樣?
問題解答
回答1:這個和瀏覽器處理文本的原理有關,沒有深刨到底層,但是可以近似于這么理解:1、瀏覽器處理的區分標準其實是英文單詞,當遇到多個英文單詞(中間含空格分隔開才算,原因見下文)溢出屏幕時,猜測設計者的初衷是為了便于閱讀,所以瀏覽器會以空格作為分隔標準,對英文字母換行處理(因為瀏覽器認為空格隔開了,這是一個單詞),而長英文字母串,中間無空格,會被判斷為這是一整個單詞所以不會換行。2、輸入中文時,瀏覽器會把每一個中文判斷為一個“單詞”,所以對每一個溢出屏幕的字都進行了換行處理。3、對于數字,瀏覽器識別規則和英文字母一致。
所以綜上,并非是文字和數字有所區別,關鍵應該在于空格。例如你可以測試一下你代碼中的message = '777 777 777',即數字間含空格,會發現就算是數字,瀏覽器也換行了。同理亦可測試message = 'cat cat cat'和'catcatcat'的區別。最后回到white-space: nowrap這個屬性,w3school給出的含義是“文本不會換行,文本會在在同一行上繼續,直到遇到 <br> 標簽為止。”所以也能解釋得通為什么加上之后文字就沒有換行了。
回答2:css加上white-space: nowrap;
相關文章:
1. docker - 各位電腦上有多少個容器啊?容器一多,自己都搞混了,咋辦呢?2. 關docker hub上有些鏡像的tag被標記““This image has vulnerabilities””3. mac里的docker如何命令行開啟呢?4. 關于docker下的nginx壓力測試5. Docker for Mac 創建的dnsmasq容器連不上/不工作的問題6. nignx - docker內nginx 80端口被占用7. docker容器呢SSH為什么連不通呢?8. 如何解決Centos下Docker服務啟動無響應,且輸入docker命令無響應?9. docker start -a dockername 老是卡住,什么情況?10. dockerfile - 我用docker build的時候出現下邊問題 麻煩幫我看一下

網公網安備