What is the difference between overflow:hidden and display:none?
Example:
.oh
{
height: 50px;
width: 200px;
overflow: hidden;
}
If text in the block with this class is bigger (longer) than what this little box can display, the excess will be just hidden. You will see the start of the text only.
display: none; will just hide the block.
Note you have also visibility: hidden; which hides the content of the block, but the block will be still in the layout, moving things around.
display: none removes the element from the page, and the flow of the page acts as if it's not there at all.
overflow: hidden:
The CSS overflow: hidden property can be used to reveal more or less of an element based on the width of the browser window.
Overflow:hidden just says if text flows outside of this element the scrollbars don't show. display:none says the element is not shown.
Simple example of overflow: hidden http://www.w3schools.com/Css/tryit.asp?filename=trycss_pos_overflow_hidden
If you edit the CCS on that page, you can see the difference between the overflow attributes (visible | hidden | scroll | auto ) - and if you add display: none to the css, you will see the whole content block is disappears.
Basically it's a way of controlling layout and element "flow" - if you are allowing user input (from a CMS field say), to render in a fixed sized block, you can adjust the overflow attribute to stop the box increasing in size and therefore breaking the layout of the page. (conversely, display: none prevents the element from displaying and therfore the entire page re-adjusts)
By default, HTML elements are as tall as required to contain their content.
If you give an HTML element a fixed height, it may not be big enough to contain its content. So, for example, if you had a paragraph with a fixed height and a blue background:
<p>This is an example paragraph. It has some text in it to try and give it a reasonable height. In a separate style sheet, we’re going to give it a blue background and a fixed height. If we add overflow: hidden, we won’t see any text that extends beyond the fixed height of the paragraph. Until then, the text will “overflow” the paragraph, extending beyond the blue background.</p>
p {
background-color: #ccf;
height: 20px;
}
The text within the paragraph would extend beyond the bottom edge of the paragraph.
The overflow property allows you to change this default behaviour. So, if you added overflow: hidden:
p {
background-color: #ccf;
height: 20px;
overflow: hidden;
}
Then you wouldn’t see any of the text beyond the bottom edge of the paragraph. It would be clipped to the fixed height of the paragraph.
display: none would simply make the entire paragraph (visually) disappear, blue background and all, as if it didn’t appear in the HTML at all.
Let's say you have a div that measures 100 x 100px
You then put a whole bunch of text into it, such as it overflows the div. If you use overflow: hidden; then the text that fits into the 100x100 will not be displayed, and will not affect layout.
display: none is completely different. It renders the rest of the page as if if the div was still visible. Even if there is overflow, that will be taken into account. It simply leaves space for the div, but does not render it. If both are set: display: none; overflow: hidden; then it will not be displayed, the text will not overflow, and the page will be rendered as if the invisible div were still there.
In order to make the div not affect the rendering at all, then both display: none; overflow: hidden; should be set, and also, do something such as set height: 0;. Or with the width, or both, then the page will be rendered as if the div did not exist at all.
overflow: hidden - hides the overflow of the content, in contrast with overflow: auto who shows scrollbars on a fixed sized div where it's inner content is larger than it's size
display: none - hides an element and it completely doesn't participant in content layout
P.S. there is no difference between the two, they are completely unrelated
display:none means that the the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags. Overflow hidden means that the tag is rendered with a certain height and any text etc which would cause the tag to expand to render it will not display. I think what you mean to ask is visibility:hidden. This means that unlike display none, the tag is not visible, but space is allocated for it on the page. so for example
<span>test</span> | <span>Appropriate style in this tag</span> | <span>test</span>
display:none would be:
test | | test
visibility:hidden would be:
test | | test
In visibility:hidden the tag is rendered, it just isn't seen on the page.
Related
I show a lot of code on my site. The rest of my site is responsive, but the "pre" tag refuses to shrink and display horizontal scroll bars. Here's a screenshot of my content getting cut off due to the long "pre" tag at the top:
I'm using overflow:horizontal, but you can see in the example that it doesn't work. Here's the actual link enter link description here
As soon as I switch my theme, it works fine! I'm using a child theme of the Genesis Framework...
You need to assign a width to the element, so that the content can overflow.
Try setting width: 100vw, for example, and it will work.
If your pre tag has margin/padding to the sides for your actual website layout, try width: calc(100vw - 40px) whereas in this example 40px relates to a margin of 20px to both sides. Replace it with your own actual margin/padding.
I don't know why nobody gave the answer of:
pre {
white-space: pre-wrap;
}
It preserves the lines and words while at the same time wrapping the lines if there isn't enough space.
As of 2022, you can achieve this without hard-coding widths by setting overflow: auto on the element you want to scroll.
Often this isn't enough, because the element has already enlarged its parent before the overflow property is checked. So you usually have to set overflow: auto on a bunch of parent/grandparent/etc. elements as well, to stop them from enlarging themselves. Normally this would mean they would also get scroll bars, but their children having overflow: auto prevents this (because when the children scroll, there's nothing extending beyond the parents' boundaries).
It also helps to set one of the parents to display: flex.
div.container {
display: flex;
flex-direction: column; /* Optional */
overflow: auto;
border: 1px solid red;
}
pre {
overflow: auto;
}
<html>
<body>
<div class="container">
<div>This text won't scroll</div>
<pre>
This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll. This is really long text that should scroll.
</pre>
</div>
</body>
</html>
Pre tag displays preformated text, and preserves spaces and line breaks and is fixed. Declare the white-space normal or pre-wrap.
pre {
white-space: normal;
}
Flexbox can be used to vertically align elements. But when a vertically-aligned element later grows, it can escape the bounds of its flexbox container. This happens even when overflow:auto is used on the element.
Here's a demo with some expected and actual results.
Using the demo:
Open the demo
Enter lots of text in the gray box
Expected result:
The paragraph becomes taller as text is entered. When the paragraph is as tall as its flexbox container, it stops growing and a vertical scrollbar is shown.
Actual result:
The paragraph becomes taller as text is entered, but never stops growing. It ultimately escapes the bounds of its flexbox container. A scrollbar is never shown.
Other notes:
It's tempting to put overflow:auto on the container instead, but that doesn't work as expected. Try it out. Enter lots of text and then scroll up. Notice that the top padding is gone and lines of text are missing.
You need to do the following:
Add "max-height: 100%" on the <p> element to keep it from growing indefinitely.
If you want to keep your padding on the <p>, you also need to set box-sizing: border-box to get its padding included in that max-height.
(Technically box-sizing:padding-box is what you want, but Chrome doesn't support that; so, border-box will do, because it's the same as the padding-box since there's no border.)
Here's your JS Fiddle with this fix
In your css you need to give height
p {
padding: 20px;
width: 100%;
background-color: #ccc;
outline: none;
height: 60px;
}
JS Fiddle
I have a DIV defined thusly:
<div id="divContent" class="content" style="margin-left:239px;min-height: 100%; padding: 130px 80px 30px 80px; overflow: hidden;">
The contents of the div are complex and varied, including lots of different html and css. All I want is to force the contents of the div NOT to wrap, so that as you drag the right edge of the browser window in toward the left edge, content may disappear off the right side, but never wrap.
I have already tried applying this CSS on the divContent div, and also on sub-divs inside divContent, but it did nothing:
white-space: nowrap
What options do I have?
<< EDIT >>
Here's the actual web page.
Here's how it looks (correctly) before making the page smaller:
Here's how it looks (wrongly) after making the page smaller, and it starts wrapping:
Adding overflow:hidden to the element's style, will cause any text that would have flowed out of the div to be hidden. you should remove it and replace it with white-space:nowrap
<div id="divContent" class="content"
style="margin-left:239px;min-height: 100%;
padding: 130px 80px 30px 80px; white-space:nowrap;">
Ok, thanks for adding a link to the code. My, do you you have a lot of stuff in that div? (It always helps to give the full picture with a question!) And that's the problem - specifically the label/input field pairs. These are inside dd elements, which are inside a div with class = column-thirds. That has a percentage width, which means they shrink as the window shrinks.
But there is nothing to stop the input fields dropping under their labels as the columns shrink in width. So that's what you need to stop. Adding nowrap to their containing elements (the DD elements), and a width as well to stop the label and field overflowing the end of the DD element, should do it:
dd {
white-space: nowrap;
width : 400px; /* choose your width here to be wider than the label + field */
}
to stop these items wrapping. (And check there is no float property on the labels or input fields, which might also be part of the problem).
[Further edit]
Unfortunately your setup is rather complicated. So to show the nowrap solution is basically correct: do a small test, with a bank page containing just one of your label field pairs:
<dl><dd>
<label for="txtFirstName" id="lblFirstName" title="First Name" data-required="true">First Name</label>
<input name="txtFirstName" type="text" value="Frankie8" id="txtFirstName" data-capture="DLFirstName" style="width:131px" />
</dd></dl>
and some CSS:
dd {
margin-left: 400px;
border:2px solid black;
white-space: nowrap;
}
Then narrow your window until the right window margin overlaps the field, then comment out the white-space line; you'll see the field drop down under the label. (I've tried it, it works as expected). Hopefully that shows what the basic problem to solve is.
However, looking through your CSS files I see you have a media query in the LESS file Style.less (look for #media around line 1976), that redefines labels as block elements, using display: block. That stops the above nowrap solution working. Labels are normally inline elements. So either you need to be able to get rid of that display change if you can, or find another solution.
An alternative solution would be to give the containing divs (the class = column-thirds ones), a min-width to stop them shrinking so much they cause your wrapping problem in the first place. The only other thing I can think of might be floating the labels, but I wouldn't like to bet how that would turn out.
I hope this all helps you obtain a suitable fix for your problem.
You need to set the width to the size you want the div to be, in px units, e.g.:
... width: 500px; ...
Then, if the screen gets narrower than that, the div will disappear off the right of the screen as required, regardless of the overflow setting.
It often helps in problems like this to give all the divs borders temporarily, eg with: border 1px solid red; so you can see what's happening.
Overflow only comes into play if you fix both the width and height of the div, and the text is too long to fit in that box - it will then spread down below the div. White-space looks as though it works, because it makes the text stick to one line, until you give the div a border and realise that the div still ends at the edge of the screen (however wide that may be at any given moment) and the text now extends beyond the end of the div (which you can see if you add the border, and remove the overflow hidden).
So fixing the width of the div, if done right, should work (I've used 500px, but change that to whatever you want):
<div id="divContent" class="content" style="width: 500px; margin-left:239px;min-height: 100%; padding: 130px 80px 30px 80px; overflow: hidden;">
However, a lot depends on what content you have in your div, and what CSS they have, so if fixing the width like this doesn't work, give us those as well, please.
I'm working on a page for a class, just to display things (you can see them sorted by chapter in the body) but I originally had a list on the left that I used initially that just listed them all, and I wanted to keep it.
Problem is, once I started adding more CSS - I don't know where exactly - the area on the left just became completely unclickable. You can't highlight the text, you can't click any of it - nothing. I have absolutely no idea whatsoever what is causing this.
link to the site here
here is a pastebin link showing everything I have.
thank you, i really appreciate any help.
The .content div overlaps entire body area, because of "position: absolute;"
Add z-index: 9999; to #menu in your CSS and it should be clickable.
Other way is to use "position: relative; float: left;" to both .content and #menu, but you have to be carefull with their widths. Their sum of widths (including padding and margin and border) should be less or equal to the container width. In your case it should be body tag (actually a don't see body tag in your html).
That's because your .content div is using position: absolute; so it's taken out of the page flow and overlapping your sidebar because it has no width set (block elements span the full width of your viewport unless you give it a fixed width) ... just add a negative z-index value to your .content div and it should work fine.
More on z-index
I'm struggling with a client project. All of my divs have no absolute positioning, height:100% for html, body, and container divs, and yet the static-content stops short of its contents (at 910px).
I can change the overflow property to auto, and the background will continue down to the end of the content, but it adds a scroll bar, and the bottom border of the static-content div stays in the same place (at 910px).
UPDATE: Development link was no longer valid, so I removed it. Suffice to say that Animuson's thorough explanation is the valuable part of this thread, and solved the problem of containers not expanding to match their content. – Ty
You used the wrong overflow-y property for clearing, and you should set a min-height instead of a regular height. Try this:
#static-content {
background-color: #FFFFFF;
margin: 0 auto;
min-height: 100%; /* Set to minimum height so overflow doesn't get hidden */
overflow-y: hidden; /* HIDE overflow; I know, it doesn't make much sense */
position: relative;
width: 960px;
}
Floating Content by Itself
Given this green box which has a padding of 20px (for visibility), notice how a single red box floated to the left will expand past the boundary of its parent box. This is because floating content doesn't actually take up any "space" in the visual area. All other elements will expand underneath it, and only text will wrap around it.
Clearing Floated Content in the Parent
In order to counter this and make the green box completely encompass the area of its child red box, we can add overflow: hidden to its styles. This will expand the box down far enough.
Expanding the Parent to 100% Height
You might think that just adding height: 100% is the simplest way to make it expand to where it needs to be.However, the height property specifies an absolute height. Since the content which is floated does not actually take up any vertical space, our overflow: hidden property will cut off all the content that goes past the parent's height.
Using a Minimum Height Instead
Since we want it to expand to at least a 100% height, we can use the min-height property to force it there and still maintain the "automatic" height needed to make the parent green box fully encompass the child red box, letting it push past the 100% only when it needs too.
How You Were Set Up
All elements, by default, are set to overflow: visible so that property didn't really change anything. The only difference you had between this and the first example I provided was that you had a height: 100% set on the element. So the parent was expanding to 100% height but still not encompassing the full height of its child red box.
If you have to use overflow:visible for some reason, there's other way to force container to stretch to contain all floated content. You have to put element with clear:both as a last container's elements. If you ignore ancient IEs (<8) you can do it with very simple css (vide https://css-tricks.com/snippets/css/clear-fix/):
.your-container:after {
content: "";
display: table;
clear: both;
}
If height: 100% doesn't work well for you, you can try this calc function from CSS3:
/* Firefox */
height: -moz-calc(100%);
/* WebKit */
height: -webkit-calc(100%);
/* Standard */
height: calc(100%);
You can try this either with height, or with min-height, as already said. You can with this calc functions also other calculations like:
height: -moz-calc(100% - 50px);
And this is sometimes very useful, as you might guess.
height:100% is the height of the content that flows with your container at hand and is not taking into account your floated content, so that is why the height of your container is stopping short. Remove it and clear your container properly to clear your floated elements within and it will work:
#static-content:before, #static-content:aftr {
display:table;
content:"";
}
#static-content:after {
clear:both;
}
#static-content {
zoom:1; /*ie fix*/
}
You have a float in static-maincontent, which removes it from the regular flow of the content of the document, and hence static-content doesn't care about its height any more, and so won't expand to cover it.
Additionally, remove height:100% for static-content.
READ FOR ANSWER!!!-- Okay so I had the same problem, All that was needed was to remove the "Positioning" Style. Should work perfectly fine.