转型还是不转型

Question

这是我今天运行遇到的一件奇怪的事情，想知道其他人的想法。基本上，当文本超出 DIV 时，我试图隐藏文本。不是 - "Oh! How do you hide something" - 但 - "I'm sliding the text across the screen and want it to disappear when it goes outside of the DIV box." 这没有用。所以第一个问题是——我做错了什么？欢迎提出想法和意见。 :-) 这是代码：

PS：我输入了 BODY 的 "overflow:hidden;" 因为我也在测试它。仅供参考。 :-)

<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

我只有时间来回答你的第一个问题。

您的文字已被赋予“绝对”地位。 Absolute 使元素脱离文档的正常流动。将 .p1 元素上的 position:absolute 更改为 position: relative 应该可以解决您的问题

你可以多读一些here。该问题的答案将帮助您进一步了解它。

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

转型还是不转型

To transform or not to transform

javascript

html

css

transform