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

Question

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

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

Answer 1

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

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

Answer 2

С помощью CSS

h1 {
  max-width: 200px;
}

h1.clip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<h1 class="clip">Слишком длинный заголовок</h1>

БЛОГ НА HUSL

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

Ответы (2 шт):

С помощью CSS