Html 为什么文本在离开页面时不隐藏？

由于某些原因，我无法在文本从屏幕上过渡时将其隐藏。 例如，我在屏幕外隐藏了一个矩形，但即使在页面应该结束（页面的侧面）之后，矩形仍然可见，这很奇怪。我以前解决过这个问题，但我忘了

代码：

RNS博客
#图蒂{
左边距：1000px；
右边距：0；
}
#图蒂：悬停{
宽度：600px；
填充：0px；
}
#图蒂a{
浮动：左；
溢出：隐藏；
左侧填充：45px；
空白：nowrap；
字号：1.5em；
}
#图蒂{
宽度：30px；
高度：75px；
背景色：#655655；
-webkit过渡：宽度2s；/*适用于Safari 3.1到6.0*/
过渡：宽度2s；
不透明度：0.5；
保证金：0；
填充：0；
边界：0；
颜色：白色；
字体大小：300；
边缘顶部：30px；
}
.对{
浮动：对；
}
}
确保分配
溢出：隐藏到包含拉出条的任何元素。在你的JSFIDLE中添加这个
#tuti{overflow:hidden；}
，你会看到它会起作用。
主要原因是
a
标记中的文本有宽度，
h1
标记应该设置为
overflow:hidden
。此外，在
h1
上设置
position:absolute
将使其脱离文档流，并允许您将其放置在任何位置，而不会影响相邻元素。以下是清理后的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;
}

清理小提琴：


您还需要解决以下问题：

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



无逗号：

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

您的HTML非常无效，internet explorer 6会正确呈现它。请修改你的html并重新表述你的问题，我不明白你想在这里实现什么。
<h1 class="right" id="tuti">