CSS Off-screen text

From Level Access Web Labs
Jump to: navigation, search

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