Eu tenho um div que é estilizado comoverflow-x: hidden, mas eu estou achando que quando há um div maior dentro dele que contém texto, o usuário ainda pode arrastar para os lados com o mouse para ver o texto oculto.

Eu gostaria de evitar isso e tornar o texto realmente oculto. Este jsfiddle deve mostrar o que quero dizer:http://jsfiddle.net/YzsGF/11/ ou aqui está o código:

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

Existe uma maneira que eu possa impedir que o usuário possa ver o texto oculto?

UPDATE: Eu preciso de overflow-y para funcionar: está tudo bem que overflow-x seja apenas CSS3. Isso pode ajudar a explicar o cenário da vida real:

Eu tenho uma div interna de largura fixa mas comprimento desconhecido.Quando é suficientemente curto para caber no div externo sem uma barra de rolagem y, tudo está bem.Quando a div interna se torna longa o suficiente para que a div externa precise de uma barra de rolagem y, uma aparece, mas corta parte do conteúdo da mão direita da div interna. Isso também é OK (deixei alguns pads de RH deliberadamente), mas o que não está certo é que o usuário pode selecionar o texto e arrastá-lo para o lado, revelando o preenchimento RH vazio e escondendo parte do texto no lado esquerdo.

Alguma solução?