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?

Answer 1

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