Question

出于某种原因，我无法在文本从屏幕上转换时隐藏文本。例如，我有一个隐藏在屏幕外的矩形，但即使在页面结束后（页面的两侧），矩形仍然可见，这是非常奇怪的。我以前解决了这个问题，但我忘记了。

代码：

<!DOCTYPE html>
<html>
<header>
        <title>RNS|Blog</title>
</header>
<head>
</head>
<body>

<style>

#tuti {
margin-left: 1000px;
margin-right: 0;
}

    #tuti:hover {
width: 600px;
padding: 0px;
}

#tuti a {
float: left;
overflow: hidden;
padding-left: 45px;
white-space: nowrap;
font-size: 1.5em;
}

#tuti {
width: 30px;
height: 75px;
background-color: #655655;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
opacity: 0.5;
margin: 0;
padding: 0;
border: 0;
color: white;
font-weight: 300;
margin-top: 30px;
}

.right {
float: right;
}
}





</style>
    <h1 class="right", id="tuti"><a>really nice server I blog</a></h1>
</body>
<footer>
</footer>
</html>

JSFiddle：https://jsfiddle.net/eobwtvxL/

Answer 1

主要原因是a标记中的文字具有宽度，h1标记应设置为overflow:hidden。此外，在position:absolute上设置h1会将其从文档流中取出，并允许您将其放在任何位置而不会影响相邻元素。这是清理过的CSS：

#tuti {
    overflow:hidden;
    position:absolute;
    right:30px;
    top:30px;
    width: 30px;
    height: 75px;
    background-color: #655655;
    -webkit-transition: width 2s;
    /* For Safari 3.1 to 6.0 */
    transition: width 2s;
    opacity: 0.5;
    margin: 0;
    padding: 0;
    border: 0;
    color: white;
    font-weight: 300;
}
#tuti:hover {
    width: 600px;
    padding: 0px;
}
#tuti a {
    position:absolute;
    overflow: hidden;
    padding-left: 45px;
    white-space: nowrap;
    font-size: 1.5em;
}

清理小提琴：

https://jsfiddle.net/eobwtvxL/1/

您还需要解决此问题：

<h1 class="right", id="tuti">

没有逗号：

<h1 class="right" id="tuti">

Answer 2

确保将overflow:hidden;分配给包含拉出栏的任何元素。在你的jsfiddle中添加这个#tuti {overflow:hidden;}，你会发现它会起作用。

为什么文本不在页面外隐藏？

2 个答案: