Stack Overflow
Stack Overflow

Questions tagged [overflow]

Overflow is a CSS property which governs what happens if content overflows its containing box. Do not use this tag for stack buffer overflow bugs and vulnerabilities; use [buffer-overflow] and/or [stack-smash] instead.

A CSS property which governs what happens if content overflows its containing box. Possible values are

  • visible: Content is not clipped and the overflow is shown outside of the element.
  • hidden: Content is clipped and the overflow is not shown.
  • scroll: Content is clipped but a scroll bar is shown regardless of whether the content overflows or not.
  • auto: Same as scroll except the scroll bar is only shown if the content actually overflows.
  • inherit: Inherits from the parent element property

Do not use this tag for questions about a stack overflow, buffer overflow or stack smashing error or vulnerability. See the appropriate tag(s) instead: , , .

6236 questions
939
votes
20 answers

Limit text length to n lines using CSS

Is it possible to limit a text length to "n" lines using CSS (or cut it when overflows vertically). text-overflow: ellipsis; only works for 1 line text. original text: Ultrices natoque mus mattis, aliquam, cras in pellentesque tincidunt elit…
Peter
  • 5,138
  • 5
  • 29
  • 38
661
votes
18 answers

CSS text-overflow: ellipsis; not working?

I don't know why this simple CSS isn't working... .app a { height: 18px; width: 140px; padding: 0; overflow: hidden; position: relative; margin: 0 5px 0 5px; text-align: center; text-decoration: none; text-overflow:…
ChristopherStrydom
  • 7,338
  • 5
  • 21
  • 34
648
votes
14 answers

CSS text-overflow in a table cell?

I want to use CSS text-overflow in a table cell, such that if the text is too long to fit on one line, it will clip with an ellipsis instead of wrapping to multiple lines. Is this possible? I tried this: td { overflow: hidden; text-overflow:…
daGUY
  • 27,055
  • 29
  • 75
  • 119
638
votes
10 answers

CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

Suppose you have some style and the markup: ul { white-space: nowrap; overflow-x: visible; overflow-y: hidden; /* added width so it would work in the snippet */ width: 100px; } li { display: inline-block; }
  • 1
    • …
James Khoury
  • 21,330
  • 4
  • 34
  • 65
289
votes
4 answers

CSS - Overflow: Scroll; - Always show vertical scroll bar?

So currently I have: #div { position: relative; height: 510px; overflow-y: scroll; } However I don't believe that it will be obvious to some users that there is more content there. They could scroll down the page without knowing that my div…
Jambo
  • 2,937
  • 2
  • 17
  • 15
278
votes
18 answers

HTML text-overflow ellipsis detection

I have some elements on my page which have the CSS rules white-space, overflow, text-overflow set, so that overflowing text is trimmed and an ellipsis is used. div { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; border:…
deanoj
  • 3,191
  • 2
  • 17
  • 11
270
votes
16 answers

Check if an element's content is overflowing?

What's the easiest way to detect if an element has been overflowed? My use case is, I want to limit a certain content box to have a height of 300px. If the inner content is taller than that, I cut it off with an overflow. But if it is overflowed I…
Harry
  • 52,711
  • 71
  • 177
  • 261
261
votes
19 answers

How can I truncate table cells, but fit as much as content possible?

Meet Fred. He's a table:
This cells has more content Less content here
Fred's apartment has a bizarre habit of changing size, so he's learned to…
s4y
  • 50,525
  • 12
  • 70
  • 98
255
votes
8 answers

Why is this inline-block element pushed downward?

Following is my code and I want to understand that why #firstDiv is being pushed downward by all browsers. I really want to understand the inner workings of the fact that why its being pushed downward rather than pulling it upward by one way or…
Shawn Taylor
  • 3,974
  • 4
  • 17
  • 23
243
votes
17 answers

Div height 100% and expands to fit content

I have a div element on my page with its height set to 100%. The height of the body is also set to 100%. The inner div has a background and all that and is different from the body background. This works for making the div height 100% of the browser…
Joey
  • 10,504
  • 16
  • 39
  • 54
223
votes
5 answers

Have a fixed position div that needs to scroll if content overflows

I have actually two issues, but lets resolve the primary issue first as I believe the other is easier to address. I have a fixed position div on the left side of the scroll for a menu. Right side is a standard div that scrolls properly. The issue is…
TCD Factory
  • 2,344
  • 2
  • 15
  • 12
207
votes
7 answers

CSS margin terror; Margin adds space outside parent element

My css margins doesn't behave the way I want or expect them to. I seems like my header margin-top affect the div-tags surrounding it. This is what I want and expect: ...but this is what I end up with: Source:
lejahmie
  • 17,938
  • 16
  • 54
  • 77
203
votes
4 answers

How can I make text appear on next line instead of overflowing?

I have a fixed width div on my page that contains text. When I enter a long string of letters it overflows. I don't want to hide overflow I want to display the overflow on a new line, see below:
user342391
  • 7,569
  • 23
  • 66
  • 88
192
votes
10 answers

css overflow - only 1 line of text

I have div with the following css style: width:335px; float:left; overflow:hidden; padding-left:5px; When I insert, into that div, a long line of text, it's breaking to a new line and displays all the text. What I want is to have only one line of…
homerun
  • 19,837
  • 15
  • 45
  • 70
192
votes
15 answers

How to prevent text from overflowing in CSS?

How can I prevent text in a div block from overflowing in CSS? div { width: 150px; /* what to put here? */ }
This div contains a VeryLongWordWhichDoesNotFitToTheBorder.
Gjr
1
2 3
…
99 100