Search code examples
javascriptcssmedia-queries

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

I want to use abbreviation of days in small screen size.
For example when screen is shrinked I want to change 'Saturday' to 'Sat'.
How can I do this?

Solution

  • 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