Question

这是我今天遇到的一个奇怪的事情，想知道其他人的想法。基本上，我试图在文本超出DIV时隐藏文本。不 - ＆＃34;哦！你怎么隐藏的东西＆＃34; - 但是 - ＆＃34;我在屏幕上滑动文本，并希望它在DIV框外面消失。＆＃34;这没用。所以第一个问题是 - 我做错了什么？欢迎提出意见和建议。 :-)这是代码：

PS：我加入了BODY＆＃39;溢出：隐藏;＆＃34;因为我也在测试它。只是一个FYI。： - ）

<html>
<head>
<title>Test</title>
<style>
.p1 {   position:absolute;
                top:50px;
                left:50px;
                border: 1px solid grey;
                padding: 5px;
                font-family: sans-serif,Arial,Helvetica,Verdana,"Trebuchet MS",Tahoma,"MS Sans Serif",Geneva;
                font-size: 12pt;
                width: 150px;
                height: 10pt;
                overflow: hidden;
                z-index:0;
            }
</style>
</head>
<body style='overflow:hidden;'>
<div id='d1' name='d1' style="width:500px;height:400px;overflow:hidden;z-index:1;
    border:1px solid black;clip: rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);">
<p id='p1' name='p1' class='p1'>This is a test of how HTML works</p>
<p id='p2' name='p2' class='p1'>This is a test of how HTML works</p>
<p id='p3' name='p3' class='p1'>This is a test of how HTML works</p>
</div>
<script>
function moveIt(n)
{
    document.getElementById("p1").style.left = n;
    document.getElementById("p2").style.top = n;
    document.getElementById("p3").style.left = n;
    document.getElementById("p3").style.top = n;
//  document.getElementById("d1").style.transform = "rotate(" + n + "deg)";
    if( n < 2000 ){ setTimeout("moveIt(" + (n + 1) + ")", 1 ); }
        else { moveIt2(n); }
}
function moveIt2(n)
{
    document.getElementById("p1").style.left = n;
    document.getElementById("p2").style.top = n;
    document.getElementById("p3").style.left = n;
    document.getElementById("p3").style.top = n;
//  document.getElementById("d1").style.transform = "rotate(" + n + "deg)";
    if( n > -1000 ){ setTimeout("moveIt2(" + (n - 1) + ")", 1 ); }
        else { moveIt(n); }
}
    moveIt(50);
</script>
</body>
</html>

Answer 1

我只有时间进入你的第一个问题。

您的文字已被赋予“绝对”的位置。绝对使元素超出文档的正常流程。更改位置：.p1元素上的绝对位置：relative应解决您的问题

您可以阅读更多here。这个问题的答案将帮助你理解它。

我希望这能回答你的第一个问题

变换或不变换

1 个答案: