33

How can you hide the overflow in a div?

Here the text just wraps down to a new line if the text is longer than the div

<div style="width:50px; border:1px solid black; overflow-y:hidden">
    test test test test
</div>
2
  • 3
    @JohnnyCraig - There is no such thing as 'overflow:none'
    – Rob
    Sep 30, 2011 at 14:54
  • 4
    thanks rob. my mistake, it happens but instead of just telling people what there isnt, you should also include what there is.overflow:hidden; Sep 30, 2011 at 15:15

4 Answers 4

42

Maybe the CSS property text-overflow: ellipsis can help you out with that problem.

Consider this HTML and CSS below:

<div id="truncateLongTexts">
    test test test test
</div>
#truncateLongTexts {
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* This is where the magic happens. */
}
0
34

If you only want to show a single line of text in a fixed width div, give white-space:nowrap a go. Together with overflow:hidden it will force your browser not to break the line and crop the view to your forced width.

You might also add text-overflow:ellipsis to avoid cutting words and letters in half, it adds a nice ... to the end to show you there's some bits missing. I'm not sure about the browser support though, and I've never tried this one.

1
  • 4
    Firefox 7 just came out, it is the first Firefox that supports text-overflow. Other browsers support it (even old IEs). See text-overflow on caniuse.com. And +1.
    – kapa
    Sep 30, 2011 at 17:09
13

You should specify a height for your div, overflow: hidden; can only hide the vertically overflowing content if there is some kind of defined height.


In other words:

Here the text just wraps down to a new line if the text is longer than the div

But how long is that div actually?


Please check out my jsFiddle demonstration that illustrates the difference.

2
  • even when specifying the height, the text still wraps down to a new line.. but there is overflow - yes
    – clarkk
    Sep 30, 2011 at 15:20
  • @clarkk Then what are you trying to achieve exactly?
    – kapa
    Sep 30, 2011 at 15:37
0

try overflow:none;

you didn't mention if you want scrollbars or not.

EDIT:

Sorry I meant overflow:hidden.

1
  • 1
    There is NO none value for the overflow property. See CSS2 Spec.
    – kapa
    Sep 30, 2011 at 14:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.