Почему текст не скрывается на странице?

По какой-то причине я не могу заставить текст спрятаться, пока он переходит с экрана. Пример: у меня есть прямоугольник, скрытый от экрана, но даже после того, как страница должна заканчиваться (стороны страницы), прямоугольник все еще виден, что очень странно. Я решил эту проблему раньше, но я забыл.Почему текст не скрывается на странице?

Код:

<!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/

источник

2015-03-30 Tate

Ваш HTML так я nvalid, Internet explorer 6 делает это правильно. Пожалуйста, исправьте свой html и перефразируйте свой вопрос, я не понимаю, что вы пытаетесь сделать здесь. –

Основная причина в том, что текст в теге 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">

источник

2015-03-30 03:16:34 disinfor

Убедитесь назначить overflow:hidden; к любому элементу, который содержит строку выдвижную. В jsfiddle добавьте это #tuti {overflow:hidden;}, и вы увидите, что он будет работать.

источник

2015-03-30 03:12:58 Kinburn101

Почему текст не скрывается на странице?

ответ

Смежные вопросы