CSS: сделать overflow-x: hidden действительно скрытым?

У меня есть div со стилем overflow-x: hidden, но я обнаружил, что когда внутри него есть более широкий div, содержащий текст, пользователь все еще может перетаскивать его вбок с помощью мышь, чтобы просмотреть скрытый текст.

Я хотел бы предотвратить это и сделать текст действительно скрытым. Этот jsfiddle должен показать, что я имею в виду: http://jsfiddle.net/YzsGF/11/или вот код:

   

       How can I truly hide the text beyond the margin?
    

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

Есть ли способ запретить пользователю видеть скрытый текст?

ОБНОВЛЕНИЕ: Мне нужно, чтобы overflow-y работал: это нормально, что overflow-x — это только CSS3. Это может помочь объяснить реальный сценарий:

• У меня есть внутренний div фиксированной ширины, но неизвестной длины.
• Когда он достаточно короткий, чтобы поместиться во внешнем div без полосы прокрутки y, все в порядке.
• Когда внутренний div становится достаточно длинным, чтобы внешнему div понадобилась полоса прокрутки y, она появляется, но обрезает часть правого содержимого внутреннего div. Это тоже нормально (я намеренно оставил немного правого отступа), но что не так, так это то, что пользователь может выбрать текст и перетащить его в сторону, открывая пустое правое отступы и скрывая часть текста с левой стороны.

Любые решения?