html - CSS: make overflow-x: hidden 真的隐藏了吗？

Question

我有一个使用 overflow-x: hidden 设置样式的 div，但我发现当其中包含文本的更宽的 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

您可以使用 CSS clip 属性。 这将通过不显示超出剪辑矩形的任何内容来根据需要剪辑您的文本，并且还会阻止用户滚动。

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

示例:

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

注意:您需要为此 clip 属性指定一个绝对定位才能正常工作。

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