Question

嘿我正在编写一个关于codepen的子弹评论笔，一切正常，但有一个问题。
包含带有空格的文本的“子弹”范围在到达#screen的左边界时自动改变其形状。 https://i.stack.imgur.com/JGCP6.jpg
我不知道如何解决这个问题。这是我的codepen https://codepen.io/NuclearBlast/pen/zzOQEO
HTML：

.container
.row#row1
div.col-md-10#screen
.row#row2
div#control.col-md-10.col-md-offset-1
  input(type="text" placeholder="Say something" )#input
  div#buttons
    button.btn.btn-default#btnshoot(type="button"  disabled) shoot
    button.btn.btn-default#btnclear clear

JS：

$("#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";
      }

Answer 1

要防止文本在到达旁边时换行到下一行，您可以使用CSS white-space属性：

span {
    white-space: nowrap;
}

问：span在动画到其父级边框时自动更改其形状

1 个答案: