Javascript Q:span在其父对象的边界设置动画时自动更改其形状

嘿，我目前正在codepen上建立一个bullet评论笔，一切正常，但有一个问题。 包含带有空格的文本的项目符号跨距在到达屏幕左边框时会自动改变其形状。 我不知道如何解决这个问题。 这是我的密码笔 HTML:

JS:

---

要防止文本在到达侧面时换行到下一行，可以使用CSS空白属性：

span {
    white-space: nowrap;
}

---

项目符号->空白：nowrap@威廉瓦哈基斯哈！我看到你编辑了你的评论。你是什么意思？你是说我把它改成了他的答案D盘旋在时间上，我比他早7秒回答D@WilliamValhakis事实上，这是7秒后，他nvm我只是开玩笑，谢谢你太！不，你不明白。在他回答之后，全球时区时间向后移动了14秒。

$("#btnshoot").click(function shootBullet(){
  var cmt=$("#input").val();
  var screen=document.getElementById("screen");
  var bullet = document.createElement("SPAN");
  var textNode=document.createTextNode(cmt);
  bullet.appendChild(textNode);
  $(bullet).css({"max-
height":"30px","right":"-50px","bottom":rdmHeight()+"","width":"auto","font-
size":"2em","position":"absolute"});
 console.log($(bullet).css("bottom"));
 screen.appendChild(bullet); 

$(bullet).animate(
{right:$(screen).width()+$(this).width()},5000,"linear",function(){
    $(this).remove();
  });
 $("#input").val("");
  //generate a random css bottom value for the bullet
  function rdmHeight(){
    var scrH=$(screen).height();
    var rdmH=Math.random()*scrH;
    if(rdmH+50>scrH){
       rdmH=scrH-30;
           }
     return rdmH+"px";
      }

span {
    white-space: nowrap;
}