Q: span automatically ändert seine Form, wenn es animiert an den Rand seines Elternteils

Question

Hey, ich baue gerade einen Bullet-Kommentar Stift auf Codepen, alles funktioniert gut, aber es gibt ein Problem.
Die „Kugel“ Spanne, die einen Text mit Leerzeichen enthält in seine Form automatisch ändert, wenn sie # Bildschirm des linken Rand erreicht. https://i.stack.imgur.com/JGCP6.jpg
Ich weiß nicht, wie dieses Problem zu beheben. Das ist mein 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

den Textumbruch in der nächsten Zeile zu verhindern, wenn es auf der Seite trifft, können Sie die CSS white-space Eigenschaft:

span { 
    white-space: nowrap; 
}