在不移动文本的情况下对元素的缩放效果

Question

我有一个带有文字的语音泡泡。我试着用scale effect来隐藏它。但是当我这样做的时候，里面的文字也会移动--我的意思是当scale effect发生的时候，会出现换行。我怎样才能把文字藏在里面，把它和语音泡沫一起藏起来呢？

这是我的代码：

Javascript：

var splash=$("#splash");
        splash.html("This is a short text. Hide this text.");
        splash.delay(2000).fadeIn(400).delay(1500).hide("scale",{percent: 0, direction: 'horizontal'},1000);

CSS：

#splash{
    z-index:1003;
    background-repeat:no-repeat;
    background-position:295px 8px;
    width:180px;
    height:90px;
    padding:8px 8px 20px 8px;
    font-size:24px;
    color:white;
    background-color:#222222;
    box-shadow:4px 4px black;
    opacity:0.9;
    border-radius:8px;
    display:none;
}

#splash:after{
content: '';
position: absolute;
border-style: solid;
border-width: 12px 0 12px 100px;
border-color: transparent #000000;
display: block;
width: 0;
z-index: 1;
right: -100px;
top: 50px;
display:none;
}

HTML：

<div id="splash" style="position:absolute; left:30px; top: 100px"></div>

Answer 1

我找到了解决办法。

我只是防止在css中中断行，并在我的文本中手动地这样做。现在，这些狂野的断线将不再出现。

现在，javascript中的文本：

splash.html("This is a short text. <br> Hide this text.");

我在CSS中添加了这一行：

white-space: nowrap;