Как изменить текст (не размер шрифта) в соответствии с размером экрана в CSS?

Я хочу использовать аббревиатуру дней в небольшом размере экрана.
Например, когда экран сжат, я хочу изменить "Суббота" на "Сб" .
Как я могу это сделать?

Ответ 1

Имейте 2 пролета с полными и короткими строками, а затем, когда ниже целевого разрешения, переключайтесь между ними с помощью медиазапроса:

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; }
}

Замените 1200px на целевую точку разрешения.

Подробнее о медиазапросах CSS

Ответ 2

Пример с использованием ::after. Не уверен, что он доступен для чтения с экрана и т.д.

Нажмите "полная страница" и измените размер ниже 500 пикселей, чтобы увидеть в действии.

Преимущества такого подхода:

Все содержимое находится в файле html, а не в css
Я думаю, что только скрывая ярлык дня, а не удаляя его содержимое, вы обошли некоторые проблемы доступности

@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>

Ответ 3

Вы можете использовать Jquery для этого

<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>