JSFiddle - React, Tailwind, and code Playground

by DigitalBiscuits

HTML

<div id="outer">
   <div id="inner">
       How can I truly hide the text beyond the margin?
    </div>
</div>

<p>Currently the user can select a word and drag sideways to reveal all the text beyond the margin.</p>

<p>I would like to prevent that. I don't have control over the fact there are two divs or their widths, but I can control the CSS styles applied to them.</p>
    
<p>I need a kind of <i>overflow-x: hidden-and-undraggable</i> style.</p>

CSS

#outer { 
    width: 150px; 
    height: 300px; 
    overflow-x: hidden;
    border: 1px solid black;
}
#inner { 
    position:absolute;
    clip:rect(0px,150px,300px,0px);
    width: 300px;
}