CSS: hacer overflow-x: ¿oculto de verdad?

Tengo un div que está diseñado conoverflow-x: hidden, pero me doy cuenta de que cuando hay un div más amplio dentro que contiene texto, el usuario todavía puede arrastrar hacia los lados con el mouse para ver el texto oculto.

Me gustaría evitar eso y hacer que el texto sea realmente oculto. Este jsfiddle debería mostrar lo que quiero decir:http://jsfiddle.net/YzsGF/11/ o aquí está el código:

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

¿Hay alguna manera de evitar que el usuario pueda ver el texto oculto?

ACTUALIZACIÓN: Necesito overflow-y para trabajar: está bien que overflow-x sea solo CSS3. Puede ayudar a explicar el escenario de la vida real:

Tengo una división interna de un ancho fijo pero de longitud desconocida.Cuando es lo suficientemente corto para caber en el div exterior sin una barra de desplazamiento en y, todo está bien.Cuando el div interior se vuelve lo suficientemente largo como para que el div exterior necesite una barra de desplazamiento y, aparece uno, pero corta parte del contenido de la derecha del div interior. Eso también está bien (dejé algo de relleno de RH deliberadamente), pero lo que no está bien es que el usuario pueda seleccionar el texto y arrastrarlo hacia los lados, revelando el relleno de RH vacío y ocultando parte del texto en el lado izquierdo.

¿Alguna solución?