Difference between revisions of "CSS Off-screen text"

From Level Access Web Labs
Jump to navigation Jump to search
Line 48: Line 48:
 
   <p>The text below this text but above the horizontal rule is hidden off screen with CSS clipping.</p>
 
   <p>The text below this text but above the horizontal rule is hidden off screen with CSS clipping.</p>
 
   <p class="offscreen"> This text is hidden off-screen.</p>
 
   <p class="offscreen"> This text is hidden off-screen.</p>
 +
<a href="#"><span class="offscreen">Text inside this link is offscreen</span></a>
 
   <a class="offscreen" href="#"> This is a link </a>
 
   <a class="offscreen" href="#"> This is a link </a>
 
   <hr>
 
   <hr>

Revision as of 16:06, 14 June 2017

NOTE: This page has been superseded.

Please use the page Offscreen Text, which is more recent, has more testable examples, has annotations, and has a matrix of testing results for different Browsers/ATs.


(original page follows)

The text below this text but above the horizontal rule is hidden off screen with CSS clipping.

This text is hidden off-screen.

Text inside this link is offscreen This is a link



Off-screen label for radio button below this horizontal rule

This text is hidden off-screen with the second technique.


CSS Code used in this example

.hidden
.offscreen {
position: absolute;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
padding: 0;
border: 0;
height: 1px; 
width: 1px; 
overflow: hidden;
white-space: nowrap;
}