JSFiddle - React, Tailwind, and code Playground

by Jonathan McGlone

HTML

<div id="example1">
     <h2>Hiding Text: Example 1</h2>

    <p>The text in the div below is hidden using the CSS display property.</p>
    <div class="hide1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>
<hr>
<div id="example2">
     <h2>Hiding Text: Example 2</h2>

    <p>The text in the div below is hidden using several CSS properties to make a small 1px x 1px div and then not display the overflowing text. This is the most accessible approach, because often screen readers interpret Example 1 the same way as CSS would and skip over the content completely.</p>
    <div class="hide2">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

CSS

.hide1 {
    display: none;
}
.hide2 {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px) !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}