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

Asked 6/10, 2016 at 11:3 Answered 30/1, 2023 at 20:22

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?

Tinware answered 6/10, 2016 at 11:3 Comment(4)

use @media queries to achieve this – Fewer 6/10, 2016 at 11:5

I am using @media to change font size but how can be accessed to a specific component and change its text? – Tinware 6/10, 2016 at 11:7

You should have both values within the HTML already and show/hide the appropriate one depending on the screen width then. Another approach would be to inject Content with :after and changing this content with CSS Media queries. – Wept 6/10, 2016 at 11:7

you can use two different elements for "abbreviation" and for normal string, then surely you can achieve using CSS – Fewer 6/10, 2016 at 11:12

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

Sunrise answered 6/10, 2016 at 11:14 Comment(0)

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>

Dextran answered 6/10, 2016 at 11:9 Comment(0)

You can use Jquery for this

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
   if($( window ).width() < 767){
       $("p").text("Sat");
   }else{
       $("p").text("Saturday");
   }
});
$( window ).resize(function() {
	if($( window ).width() < 767){
       $("p").text("Sat");
   }else{
       $("p").text("Saturday");
   }
});
</script>
</head>
<body>
<p>Saturday</p>
</body>
</html>

Here I have placed two functions .ready() and .resize, I have used resize function for just testing, use anyone or both it as per your need.

Yardarm answered 6/10, 2016 at 11:43 Comment(0)

I did something like this for links:

<a href="mailto:[email protected]" class="link"></a>

Then set the text with media queries.

@media (min-width: 250px) {
    .link::after {
        content: '[email protected]'
    }
}

@media (max-width: 249px){
    .link::after {
        content: 'Email'
    }
}

Collywobbles answered 30/1, 2023 at 20:22 Comment(0)

You can also do this. But note that this will clip out contents based on screen-size. But if you don't want to clip out certain letters then this might not be what you seek.

So to clip out content do this.

HTML
<p>Saturday</p>

CSS
p {
  width: 100px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media screen and only (max-width: 600px) {
p {
  width: 60px;
 }
}

Now the text will adjust on 600px screen size but the overflow will be changed to an ellipsis(...). You can also set the text-overflow to clip, then no ellipsis symbol will be shown. It will simply clip. This can be useful when showing a snippet of an article and you don't want to show the whole text on the sample display.

Hope this helps someone. Cheers!!

Toy answered 19/3, 2020 at 10:31 Comment(0)

Recommended topics

Hot tags