CSS:make overflow-x:隐藏真正隐藏？

Question

我有一个样式的div overflow-x: hidden,但是我发现当里面有一个包含文本的更宽的div时,用户仍然可以用鼠标横向拖动来查看隐藏的文本.

我想防止这种情况,并使文本真正隐藏起来.这个jsfiddle应该显示我的意思:http://jsfiddle.net/YzsGF/11/或这里是代码:

<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;
}

有没有办法阻止用户看到隐藏的文字？

更新:我需要overflow-y才能工作:overflow-x只是CSS3.它可能有助于解释现实生活场景:

• 我有一个固定宽度但未知长度的内部div.
• 当它足够短而不适合没有y滚动条的外部div时,一切都很好.
• 当内部div变得足够长以使外部div需要一个y滚动条时,会出现一个,但会切断内部div的一些右手内容.这也没问题(我故意留下了一些RH填充),但不好的是用户可以选择文本并将其拖到侧面,显示空的RH填充并隐藏LH侧的一些文本.

有解决方案吗

Answer 1

您可以使用 CSSclip属性。这将根据需要剪切文本，不显示剪切矩形之外的任何内容，并且还会阻止用户滚动。

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

例子：

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

注意：您需要指定一个绝对定位，剪辑属性才能正常工作。

更多信息在这里： http://www.w3schools.com/cssref/pr_pos_clip.asp