Блог

Главная - Вопросы по программированию - Как изменить текст (не размер шрифта) в соответствии с размером экрана в CSS?

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

#javascript #css #media-queries

#javascript #css #медиа-запросы

Вопрос:

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

Комментарии:

1. для достижения этой цели используйте запросы @media

2. Я использую @media для изменения размера шрифта, но как можно получить доступ к определенному компоненту и изменить его текст?

3. У вас уже должны быть оба значения в HTML и показывать / скрывать соответствующее значение в зависимости от ширины экрана. Другим подходом было бы вводить содержимое с помощью:after и изменять это содержимое с помощью медиазапросов CSS.

4. вы можете использовать два разных элемента для «сокращения» и для обычной строки, тогда, конечно, вы сможете добиться этого с помощью 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; }
}

Замените 1200 пикселей на вашу точку останова целевого разрешения.

Подробнее о медиа-запросах 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>

Здесь я разместил две функции.ready() и .resize , я использовал функцию изменения размера только для тестирования, используйте любой или оба в соответствии с вашими потребностями.

Ответ №4:

Вы также можете это сделать. Но обратите внимание, что это приведет к вырезанию содержимого в зависимости от размера экрана. Но если вы не хотите вырезать определенные буквы, это может быть не то, что вы ищете.

Итак, чтобы вырезать содержимое, сделайте это.

 HTML
<p>Saturday</p>

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

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

Теперь текст будет соответствовать размеру экрана 600 пикселей, но переполнение будет изменено на многоточие (…).
Вы также можете установить для text-overflow значение clip, тогда символ многоточия отображаться не будет. Он просто обрезается.
Это может быть полезно, когда вы показываете фрагмент статьи, и вы не хотите показывать весь текст на примере отображения.

Надеюсь, это кому-то поможет. Приветствия!!

Ответ №5:

Я сделал что-то подобное для ссылок:

 <a href="mailto:someEmail@gmail.com" class="link"></a>

Затем задайте текст с помощью медиа-запросов.

 @media (min-width: 250px) {
    .link::after {
        content: 'someEmail@gmail.com'
    }
}

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