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

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

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

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

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

I have an inner div of a fixed width but unknown length. When it is sufficiently short to fit in the outer div without a y-scrollbar, everything is fine. When the inner div becomes long enough for the outer div to need a y-scrollbar, one appears, but cuts off some of the right-hand content of the inner div. That's also OK (I left some RH padding deliberately), but what's not OK is that the user can select the text and drag it sideways, revealing the empty RH padding and hiding some of the text on the LH side.

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