How to change text (not font size) according to screen size in CSS?

Have 2 spans with full and short strings, then when below target resolution, swap between them using a media query:

HTML

<span class="full-text">Saturday</span>
<span class="short-text">Sat</span>

CSS

// Hide short text by default (resolution > 1200px)
.short-text { display: none; }

// When resolution <= 1200px, hide full text and show short text
@media (max-width: 1200px) {
    .short-text { display: inline-block; }
    .full-text { display: none; }
}

Replace 1200px with your target resolution breakpoint.

More on CSS media queries

An example using ::after. Not sure if it's accessible to screen readers and such.

Press "full page" and resize to below 500px to see in action.

Benefits of this approach are:

• All content is in the html file, not in css
• I think that by only hiding the day label, and not removing its content, you circumvent some accessibility issues

@media screen and (max-width: 500px) {
    /* Add a pseudo element with the 
       text from attribute 'data-abbr' */
    .day[data-abbr]::after { 
        content: attr(data-abbr); 
    }
    
    /* Hide the original label */
    .day > span { display: none; }
}

<div class="day" data-abbr="sat">
    <span>Saturday</span>
</div>


<div class="day" data-abbr="sun">
    <span>Sunday</span>
</div>