仿弹幕效果遇到的bug

Question

利用定位写的仿弹幕效果，一碰到边缘就出现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);}问题是弹幕只要碰到屏幕左边文字就折行了：但是输入数字就不会这样，我没有给固定宽度，不知道为什么会这样？

Answer 1

这个和浏览器处理文本的原理有关，没有深刨到底层，但是可以近似于这么理解：
1、浏览器处理的区分标准其实是英文单词，当遇到多个英文单词（中间含空格分隔开才算，原因见下文）溢出屏幕时，猜测设计者的初衷是为了便于阅读，所以浏览器会以空格作为分隔标准，对英文字母换行处理（因为浏览器认为空格隔开了，这是一个单词），而长英文字母串，中间无空格，会被判断为这是一整个单词所以不会换行。
2、输入中文时，浏览器会把每一个中文判断为一个“单词”，所以对每一个溢出屏幕的字都进行了换行处理。
3、对于数字，浏览器识别规则和英文字母一致。

所以综上，并非是文字和数字有所区别，关键应该在于空格。例如你可以测试一下你代码中的message = "777 777 777"，即数字间含空格，会发现就算是数字，浏览器也换行了。同理亦可测试message = "cat cat cat"和"catcatcat"的区别。
最后回到white-space: nowrap这个属性，w3school给出的含义是“文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。”所以也能解释得通为什么加上之后文字就没有换行了。