Mam div, który jest stylizowany naoverflow-x: hidden, ale stwierdzam, że gdy wewnątrz niego znajduje się szerszy div, który zawiera tekst, użytkownik może nadal przeciągać myszą w bok, aby zobaczyć ukryty tekst.

Chciałbym temu zapobiec i naprawdę ukryć tekst. To jsfiddle powinno pokazywać, co mam na myśli:http://jsfiddle.net/YzsGF/11/ lub tutaj jest kod:

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

Czy istnieje sposób, aby uniemożliwić użytkownikowi zobaczenie ukrytego tekstu?

UPDATE: Potrzebuję przepełnienia-y, aby działało: jest OK, że przepełnienie-x jest tylko CSS3. Pomocne może być wyjaśnienie rzeczywistego scenariusza:

Mam wewnętrzny div o stałej szerokości, ale nieznanej długości.Gdy jest wystarczająco krótki, aby zmieścić się w zewnętrznym div bez paska przewijania y, wszystko jest w porządku.Gdy wewnętrzny div staje się wystarczająco długi, aby zewnętrzny div potrzebował y-scrollbar, pojawia się jeden, ale odcina część prawej części wewnętrznej div. To także w porządku (celowo zostawiłem trochę wypełnienia RH), ale nie w porządku jest to, że użytkownik może wybrać tekst i przeciągnąć go bokiem, odsłaniając puste wypełnienie RH i ukrywając część tekstu po stronie LH.

Jakieś rozwiązania?