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?
5 answers
solution1
48 ACCPTED 2016-10-06 11:14:06
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.
solution2
10 2016-10-06 11:09:48
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
htmlfile, 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>
solution3
5 2016-10-06 11:43:14
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.
solution4
0 2020-03-19 10:31:18
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!!
solution5
0 2023-01-30 20:22:20
I did something like this for links:
<a href="mailto:someEmail@gmail.com" class="link"></a>
Then set the text with media queries.
@media (min-width: 250px) {
.link::after {
content: 'someEmail@gmail.com'
}
}
@media (max-width: 249px){
.link::after {
content: 'Email'
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.