11

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?

Improve this question
8
  • Visually this does it, but selecting the copy still selects what you can't see - odd: jsfiddle.net/mikevoermans/YzsGF/14 Commented Apr 13, 2012 at 15:24
  • overflow-x has issues in IE8 and less. Commented Apr 13, 2012 at 15:25
  • 1
    @mikevoermans: There's nothing odd about that. The actual content doesn't get truncated (and it shouldn't!). Commented Apr 13, 2012 at 15:25
  • Is javascript an option, and should the text even be selectable at all? Commented Apr 13, 2012 at 15:26
  • keep in mind overflow-x is a css3 property. Commented Apr 13, 2012 at 15:27

5 Answers 5

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks, but this disables the y-scrollbar, so doesn't work for me. It's probably a good answer in many scenarios though.
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: jsfiddle.net/DigitalBiscuits/YzsGF/22
2

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.

Improve this answer

2 Comments

Actually, overflow: hidden doesn't necessarily disable scrolling on either axis.
@BoltClock'saUnicorn - perhaps not with javascript, but it doesn't have the selection scroll problem
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/

Improve this answer

Comments

1

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);
Improve this answer

1 Comment

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.
0

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

Improve this answer

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.