实施例

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

我不确定你是否需要内部div的y轴可滚动，但如果你不需要，那么这应该适合你的需要：

#outer { 
    width: 150px; 
    height: 300px;
    overflow-x: hidden;
    border: 1px solid black;
}
#inner { 
    overflow: hidden;
    width: 100%;
}

似乎溢出和溢出-x的行为彼此不同。 http://jsfiddle.net/G3T9w/5/

Answer 2

与overflow-x: hidden不同，

overflow: hidden不会禁用滚动功能。它只会导致内容被剪裁并隐藏滚动条。元素本身仍然可以通过javascript滚动，或者你在一些选择场景中发现元素自动滚动。

没有非JavaScript解决方案，并且javascript仍然很混乱，因为如果滚动条不可见onscroll不会触发（也就是说，onscroll事件与滚动条更改位置相关联，而不是元素的实际滚动）。

有各种解决方法。 Andrew Dunn将overflow:hidden置于包装器上并将包装器设置为容器宽度的解决方案是一种解决方案。但这只能解决问题，并不能解决实际问题。但如果你对此感到满意，那么它可能是一个不错的选择。请记住，您需要将此技术应用于容器中的所有项目，否则您可能会遇到同样的问题。

Answer 3

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

#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

Answer 4

假设简化的HTML代码是：

<html><body><div class=wrap>content...</div></body></html>

将body，html设置为height：100％;

body, html {height:100%;}

将div置于体内，并将其设置为伸展到所有身高：

div.wrap {height:100%; overflow:hidden;}

这将阻止窗口以奇怪的方式滚动，例如，按下鼠标滚轮并移动它，使用锚点等。

要删除滚动条本身（直观地），您还应添加：

body {overflow: hidden; }

要通过按键盘上的箭头键禁用滚动：

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

Answer 5

对我有用的最简单的答案是将CSS样式position: fixed;添加到<body>标记。

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

5 个答案:

实施例