亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

仿彈幕效果遇到的bug

仿彈幕效果遇到的bug

aluckdog 2018-11-22 14:15:53
利用定位寫的仿彈幕效果,一碰到邊緣就出現bugCSS:.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 回答

?
大話西游666

TA貢獻1817條經驗 獲得超14個贊

這個和瀏覽器處理文本的原理有關,沒有深刨到底層,但是可以近似于這么理解:
1、瀏覽器處理的區分標準其實是英文單詞,當遇到多個英文單詞(中間含空格分隔開才算,原因見下文)溢出屏幕時,猜測設計者的初衷是為了便于閱讀,所以瀏覽器會以空格作為分隔標準,對英文字母換行處理(因為瀏覽器認為空格隔開了,這是一個單詞),而長英文字母串,中間無空格,會被判斷為這是一整個單詞所以不會換行。
2、輸入中文時,瀏覽器會把每一個中文判斷為一個“單詞”,所以對每一個溢出屏幕的字都進行了換行處理。
3、對于數字,瀏覽器識別規則和英文字母一致。

所以綜上,并非是文字和數字有所區別,關鍵應該在于空格。例如你可以測試一下你代碼中的message = "777 777 777",即數字間含空格,會發現就算是數字,瀏覽器也換行了。同理亦可測試message = "cat cat cat"和"catcatcat"的區別。
最后回到white-space: nowrap這個屬性,w3school給出的含義是“文本不會換行,文本會在在同一行上繼續,直到遇到 <br> 標簽為止?!彼砸材芙忉尩猛槭裁醇由现笪淖志蜎]有換行了。


查看完整回答
反對 回復 2018-12-28
  • 1 回答
  • 0 關注
  • 496 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號