Ahmet AY Ahmet AY - 1 month ago 9
CSS Question

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 shrink I want to change 'Saturday' to 'sat'. How can I do this?

Answer

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 short text and show full text
@media (max-width: 1200px) {
    .short-text { display: inline-block; }
    .full-text { display: none; }
}

Replace 1200px with your target resolution breakpoint.

Comments