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

Question

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?

Answer 1

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