CODEWITHSUNDEEP
htmlcssoverflow
Aadil Mughal
Aadil Mughal

Reputation: 19

Visual overflow on overflow hidden property

I already set overflow property on html tag hidden but if height of html box is let say 200px I can see the overflow of its content clearly . why?

html {
  width: 200px;
  height: 200px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: solid 2px;
}
<html lang="en">

<head>
</head>

<body>
  <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </p>
</body>

</html>

This is the result Output-image

Upvotes: 0

Views: 78

Answers (2)

elmi
elmi

Reputation: 184

Here is a simple approach. Body should be styled as well. Add body after html;

It is not a good idea to change body and html for this work, but that is possible. Creating a div element is a better option.

html,body{
  width: 200px;
  height: 200px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: solid 2px;
}
<html lang="en">

<head>
</head>

<body>
  <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </p>
</body>

</html>

Upvotes: 1

Omri Developer
Omri Developer

Reputation: 28

Enter the code into DIV, somthing like this: 

div {
            overflow: hidden;
            width: 200px;
            height: 200px;
            margin: 0;
            padding: 0;
            border: 1px solid black;
        }
<div>
    <p> Lots Of Text  Lots Of Text  Lots Of Text  Lots Of Text  L Lots Of Text  Lots Of Text  Lots Of Text  Lots Of Text  L
        Lots Of Text  Lots Of Text  Lots Of Text  Lots Of Text  LLots Of Text  Lots Of Text  Lots Of Text  Lots Of Text  L
        Lots Of Text  Lots Of Text  Lots Of Text  Lots Of Text  LLots Of Text  Lots Of Text  Lots Of Text  Lots Of Text  L
        Lots Of Text  Lots Of Text  Lots Of Text  Lots Of Text  LLots Of Text  Lots Of Text  Lots Of Text  Lots Of Text  L
        Lots Of Text  Lots Of Text  Lots Of Text  Lots Of Text  LLots Of Text  Lots Of Text  Lots Of Text  Lots Of Text  L
        Lots Of Text  Lots Of Text  Lots Of Text  Lots Of Text  LLots Of Text  Lots Of Text  Lots Of Text  Lots Of Text  L
        Lots Of Text  Lots Of Text  Lots Of Text  Lots Of Text  LLots Of Text  Lots Of Text  Lots Of Text  Lots Of Text  L
    </p>
</div>

Upvotes: 0

Related Questions