Можно ли удалить из html-тега контент по медиа-запросу

Рейтинг: 0Ответов: 2Опубликовано: 26.01.2023

Допустим есть заголовок h1. Для больших экранов содержимое этого тега представляет длинную строку. При уменьшении экрана до мобильной версии, нужно оставить этот тег, но сократить содержимое - сделать короткий заголовок. И наоборот, при увеличении экрана вернуть длинный заголовок.

Возможно ли из CSS в медиа-запросах манипулировать содержимым тегов, или это нужно делать средствами языка программирования JS/TS?

css html media-queries
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Конечно можно, вот так:

#myHeader::before {
  content: 'Hello, World!'
}

@media (max-width: 350px) {
  #myHeader::before {
    content: 'Hello, ...'
  }
}
<h1 id="myHeader"></h1>

Но вообще правильней будет сделать вот так:

.adaptive-header .mobile-header {
  display: none;
}

@media (max-width: 350px) {
  .adaptive-header .desktop-header {
    display: none;
  }
  
  .adaptive-header .mobile-header {
    display: block;
  }
}
<h1 class="adaptive-header">
  <span class="desktop-header">Hello, World!</span>
  <span class="mobile-header">Hello, ...</span>
</h1>

▲ 2

С помощью CSS

h1 {
  max-width: 200px;
}

h1.clip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<h1 class="clip">Слишком длинный заголовок</h1>