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 sidew

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