CSS: make overflow-x: hidden truly hidden?

Question

I have a div that is styled with overflow-x: hidden, but I'm finding that when there is a wider div inside it that contains text, the user can still drag sideways with the mouse to view the hidden text.

I would like to prevent that and make the text truly hidden. This jsfiddle should show what I mean: http://jsfiddle.net/YzsGF/11/ or here is the code:

<div id="outer">
   <div id="inner">
       How can I truly hide the text beyond the margin?
    </div>
</div>
#outer { 
    width: 150px; 
    height: 300px; 
    overflow-x: hidden;
    border: 1px solid black;
}
#inner { 
    width: 300px;
    overflow-x: hidden;
}

Is there a way that I can prevent the user from being able to see the hidden text?

UPDATE: I need overflow-y to work: it's OK that overflow-x is CSS3 only. It may help to explain the real-life scenario:

I have an inner div of a fixed width but unknown length.
When it is sufficiently short to fit in the outer div without a y-scrollbar, everything is fine.
When the inner div becomes long enough for the outer div to need a y-scrollbar, one appears, but cuts off some of the right-hand content of the inner div. That's also OK (I left some RH padding deliberately), but what's not OK is that the user can select the text and drag it sideways, revealing the empty RH padding and hiding some of the text on the LH side.

Any solutions?

Visually this does it, but selecting the copy still selects what you can't see - odd: http://jsfiddle.net/mikevoermans/YzsGF/14/ — mikevoermans, Apr 13 '12 at 15:24
[`overflow-x`](http://www.w3schools.com/cssref/css3_pr_overflow-x.asp) has issues in IE8 and less. — iambriansreed, Apr 13 '12 at 15:25
@mikevoermans: There's nothing odd about that. The actual content doesn't get truncated (and it shouldn't!). — BoltClock, Apr 13 '12 at 15:25
Is javascript an option, and should the text even be selectable at all? — James Montagne, Apr 13 '12 at 15:26
It may be possible but there must be a better solution? If the user is not supposed to see it why put it on the page at all? Can you cut it off server side? — Undefined, Apr 13 '12 at 15:29
Testing in Chrome, I couldn't find a solution. I tried quite a few things.. — thirtydot, Apr 13 '12 at 15:36
I've updated my answer considerably, hopefully it should better meet your requirements :) — Randy the Dev, Apr 13 '12 at 16:12

Randy the Dev · Answer 1 · 2012-04-13T16:09:05.337

2

I'm not sure if you need the y-axis of the inner div to be scrollable, but if you don't then this should suit your needs:

#outer { 
    width: 150px; 
    height: 300px;
    overflow-x: hidden;
    border: 1px solid black;
}
#inner { 
    overflow: hidden;
    width: 100%;
}

It appears as though overflow and overflow-x behave differently from each other. http://jsfiddle.net/G3T9w/5/

edited Apr 13 '12 at 16:09

answered Apr 13 '12 at 15:42

Randy the Dev

25,810
6
43
54

Erik Funkenbusch · Answer 2 · 2012-04-13T16:04:30.630

overflow-x: hidden, unlike overflow: hidden does not disable scrolling. It just causes the content to be clipped and to hide the scrollbar. The element itself is still scrollable via javascript or, as you've found out in some selection scenarios where the element auto-scrolls.

There is no non-javascript solution, and javascript is still messy because onscroll doesn't fire if the scrollbar is not visible (that is, the onscroll event is tied to the scrollbar changing position, not the actual scrolling of the element).

There are various workarounds. Andrew Dunn's solution of placing overflow:hidden on a wrapper, and setting the wrapper to the width of your container is one. But that just works around the problem, doesn't fix the actual problem. But if you're ok with that, then it's probably a good choice. Bear in mind that you need to apply this technique to all items within the container, or you can end up with the same problem.

Actually, `overflow: hidden` doesn't necessarily disable scrolling on either axis. — BoltClock, Apr 13 '12 at 16:46
@BoltClock'saUnicorn - perhaps not with javascript, but it doesn't have the selection scroll problem — Erik Funkenbusch, Apr 13 '12 at 18:06

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

You could use the CSS clip property. This will clip your text as desired by not showing anything beyond the clipping rectangle, and it will also stop the user from scrolling across.

#inner { 
position:absolute;
clip:rect(0px,150px,150px,0px);
width: 300px;
}

Example:

http://jsfiddle.net/DigitalBiscuits/YzsGF/18/

Note: you need to specify an absolute positioning for this the clip property to work it seems.

More Info Here: http://www.w3schools.com/cssref/pr_pos_clip.asp

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 13 '12 at 22:20

OACDesigns

2,279
14
24

Thanks, but this disables the y-scrollbar, so doesn't work for me. It's probably a good answer in many scenarios though. – Richard Apr 18 '12 at 10:46
well the scrollbar will still be there, but it will be clipped out of view. This modified jsfiddle demonstrates this....the content is still scrollable though on the y axis using the mouse: http://jsfiddle.net/DigitalBiscuits/YzsGF/22/ – OACDesigns Apr 18 '12 at 14:38

Sych · Answer 4 · 2016-01-04T17:46:28.737

Presuming the simplified HTML code is:

<html><body><div class=wrap>content...</div></body></html>

Set both body, html to height:100%;

body, html {height:100%;}

Put a div inside body, and set it to stretch across all the body height:

div.wrap {height:100%; overflow:hidden;}

This will prevent window from scrolling in weird ways, like, pressing mouse wheel and moving it, using anchors, etc.

To remove the scroll bar itself (visually), you should also add:

body {overflow: hidden; }

To disable scrolling via pressing arrow keys on keyboard:

window.addEventListener("keydown", function(e) {
    // space, page up, page down and arrow keys:
    if([32, 33, 34, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);

Chances are, if I'm disabling scrolling, I want to use the whole window. This can be done with `body{margin:0}`. Otherwise (at least on my Chrome set-up) you lose a small border. — Adam Chalcraft, Sep 08 '19 at 21:39

score 0 · Answer 5 · answered May 03 '16 at 16:33

0

The simplest answer that works for me is to add the CSS style position: fixed; to the <body> tag.

answered May 03 '16 at 16:33

Edmond Chui

660
9
6

CSS: make overflow-x: hidden truly hidden?

5 Answers5

Example:

Linked

Related