добавить различные стили, когда текст переносится на следующую строку

Question

У меня есть div с небольшим заголовком - всего два слова.

Когда я изменяю размер браузера, текст переносится, и последнее слово переходит на следующую строку.

Я хочу отображать разные стили для последнего слова только тогда, когда оно переходит на следующую строку.Например: font-weight: normal вместо жирного.

Это возможно только с помощью css?

Answer 1

Для этого можно использовать псевдоэлемент ::first-line.

С MDN :

Применяется псевдоэлемент :: first-line CSSстили до первой строки элемента уровня блока.Обратите внимание, что длина первой строки зависит от многих факторов, включая ширину элемента, ширину документа и размер шрифта текста.

section {
  width: 10%;
  border: 2px solid tomato;
}
h2 {
  font-weight: normal;
}
h2:first-line {
  font-weight: bold;
  color: green;
}

<section>
  <h2>Some heading</h2>
</section>

Codepen demo (изменить размер, чтобы увидеть эффект)

Answer 2

Поскольку ваш контент более динамичен, вам может потребоваться использовать Javascript для достижения этой цели.Слушатель событий на странице изменить размер, который проверяет высоту вашего заголовка div и настраивает диапазон, содержащий второе слово, должен помочь.

window.onresize = function(){
 document.getElementById('last_word').style.font-weight = 'normal';
};

Если содержимое вашей страницы довольно статично, вы, вероятно, могли бысойти с рук с помощью медиа-запроса CSS.Я не знаю ни одного способа заставить css захватить второе слово в div, но если вы поместите второе слово в промежуток, вы можете сделать что-то вроде этого:

@media (max-width: 700px) {
 #header_id>span {
  font-weight: normal;
 }
}

Конечно, заменив700px с любой шириной, которую вы найдете, запускает содержимое в перенос слов.