<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> <hr> <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> <div> <p class="hide-text">Invisible text.</p> </div> <hr> <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> </div> <hr> <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> </div>
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 { content:""; display:block; }