Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 286
Ahmet AY Avatar asked Oct 06 '16 11:10

Ahmet AY


People also ask

How do I change the font size based on screen resolution?

Select 'Display'. Select the 'Change display settings' link towards the top of the window on the left-hand side. In the 'Resolution' section, select the pull-down bar, and a slider bar should appear. Move the slider bar down to make the text larger, or move it up to make the text smaller.

How do I resize text in CSS?

To change the size of your text with inline CSS, you have to do it with the style attribute. You type in the font-size property, and then assign it a value.

How do I Auto Adjust text in CSS?

Syntax: font-size-adjust: number|none|initial|inherit; Below are the examples that illustrates the use of font-size-adjust property.


1 Answers

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

like image 129
George Kagan Avatar answered Sep 19 '22 07:09

George Kagan