Edit in JSFiddle

<p><strong>Investigating the Kellum method</strong></p>
<p>Note that none of the boxes below are styled with <code>overflow:hidden</code>. This is to let you see where the text is positioned in relation to its container.</p>
<p>The browser paints a bigger box than you may think. In most cases, it will position the text near the right edge of the viewport (not necessarely oustide of it though). </p>
    <p class="hide-text">Invisible text.</p>
<p>Also, the reference is the containing block, not the container, which means the width of the parent box could display text in plain view (<b>note that "overflow:hidden" would not change anything here</b>).</p>
<div class="narrow">
    <p class="hide-text">Invisible text</p>
    <p><strong>How to keep the text close to the right edge of the container?</strong></p>
<p>If we ignore offset like padding, it's possible to achieve this using a pseudo-element, like so:</p>
<div class="narrow">
    <p class="hide-text fix">Invisible text</p>
body {
    padding: 20px;
    background: #fbfbfb;
    font: 16px/1.5 Palatino, "Palatino LT STD", "Palatino Linotype", "Book Antiqua", Georgia, serif;

div p {
    margin: 20px 0;
    width: 400px;
    border:1px solid #B2361E;

.narrow {
    width: 200px;
    background: #E0F2FF;

.hide-text {
    text-indent: 100%;
    white-space: nowrap;
    /* commented out to show where the text appears outside the box */
    /* overflow: hidden */ 

 * keeping the text close to the right edge of the box
 * IE8+ and modern browsers 
.fix:before {