CSS переполнение-у не работает как рекламируется?

0

Я пытаюсь получить мое верхнее предложение (<p>geornvgowegnoewpgnerognm</p>), которое будет скрыто внутри div, и я не уверен, что это возможно, но одна вещь наверняка заключается в том, что стиль overflow-y не работает как и ожидалось, или, может быть, я делаю что-то ужасно неправильно. В принципе, я не ожидаю полосы прокрутки, и я получаю горизонтальную, хотя Mozilla говорит, что она должна скрывать контент по горизонтали. Я использую бета-версию Firefox 28, но это не имеет значения.

Здесь код,

<html>
<head>  
</head> 
<body>
<style type = "text/css">
#div_1
{
    overflow-y:hidden;
    height: 100px;
    width: 100px;
    top: 50%;
    left: 50%;
    background-color: white;
}
body
{
    background-color: black;
}
p
{
    font-color: blue;
    font-size: 20px;
    margin: 0 auto;
}
</style>
<div id = "div_1">
<p>geornvgowegnoewpgnerognm</p>
<p>eornvgowegnoewpgnerognm</p>
<p>ornvgowegnoewpgnerognm</p>
<p>rnvgowegnoewpgnerognm</p>
<p>nvgowegnoewpgnerognm</p>
<p>vgowegnoewpgnerognm</p>
<p>gowegnoewpgnerognm</p>
<p>owegnoewpgnerognm</p>
<p>wegnoewpgnerognm</p>
<p>egnoewpgnerognm</p>
<p>gnoewpgnerognm</p>
<p>noewpgnerognm</p>
<p>oewpgnerognm</p>
<p>ewpgnerognm</p>
<p>wpgnerognm</p>
<p>pgnerognm</p>
<p>gnerognm</p>
<p>nerognm</p>
</div>
</body>
</html>
  • 0
    y вертикальный ...
  • 0
    Хорошо, я пытаюсь сделать верхнее предложение скрытым в моем div.
Теги:
overflow

2 ответа

2
Лучший ответ

Другой способ сделать это

1) Визуально скрыть тег абзаца. Он будет держать это пространство в div, как будто его там, просто не видно.

#div_1 p:first-child {visibility: hidden;}

или 2) визуально удалить тег абзаца. Похоже, что это не так, все остальные теги абзаца будут двигаться вверх по нему.

#div_1 p:first-child {display: none;}
Поделиться
  • 0
    Отредактировано для добавления подсказок по подсветке синтаксиса, чтобы ваш код не был серым ^ _ ^
  • 0
    Кроме того, вы, вероятно, должны объяснить, что отличается между двумя кодами - что изменится, если вы используете один или другой?
Показать ещё 2 комментария
2

Чтобы избавиться от горизонтальной полосы прокрутки, используйте overflow-x:

overflow-x: hidden;

overflow-y, скрывает переполнение в направлении y. Как вверх, так и вниз, что бы скрыть вертикальную полосу прокрутки.

Поделиться
  • 0
    Вы знаете, возможно ли хотя бы скрыть верхнее предложение в div? Хорошо, если ответ - нет.
  • 0
    Что вы имеете в виду «скрыть верхнее предложение»? Вы хотите сделать так, чтобы он вообще не показывался или чтобы его отрезали? Если вы хотите скрыть свой первый <p>, используйте ответ от @zack

Ещё вопросы

Сообщество Overcoder
Наверх
Меню