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

Scaling effect on element without moving the text inside

本文关键字：缩放 元素 情况下 移动 内部 文本      更新时间：2023-09-26

我有一个语音气泡，里面有一个文本。我试图用scaleeffect来隐藏它。但当我这样做的时候，里面的文本也移动了——我的意思是出现换行符，而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>

我找到了一个解决方案
我只是在css中防止换行，并在文本中手动换行。现在这些换行符将不再出现。

javascript中的文本现在：

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

我在CSS中添加了这一行：

white-space: nowrap;
相关文章：