Не работает ::first-line на мобильном телефоне как исправить?

Question

[Алексей]

Добрый день. Мне нужно сделать чтобы 2 слова начинались с большой буквы (первая буква в 2 словах с большой буквы). На desctop нормально все работает, на телефоне почему-то все с маленькой. Как решить проблему ?

.search-number__tcountry {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 0.008em;
  color: #A0A0A0;
  text-transform: lowercase;
}
.search-number__tcountry::first-line{
  text-transform: capitalize;
}

Comments

[Ankhena]

Первая буква https://developer.mozilla.org/ru/docs/Web/CSS/::fi...

[Алексей]

Ankhena, Добрый день спасибо за ответ. Но если слово состоит из 2 слов ? Мне нужно чтобы каждая была с большой.

[Алексей Уколов]

В половине браузеров именно для этой комбинации баги: https://developer.mozilla.org/ru/docs/Web/CSS/::fi...

[Алексей]

Алексей Уколов, спасибо за ответ. А есть какое решение ?

[Алексей Уколов]

Мне ничего, кроме костылей на js, в голову не приходит.

[Ankhena]

Алексей, оборачивать в span (руками или на js)

[Алексей]

Ankhena, поставил все как документации в div (display:block) текст находится в блочном теге (p) UNITED STATES на нотубуке работает, на телефоне нет.

Answer 1

[Филипп Саган]

Можно картинки пожалуйста как это всё выглядит на телефоне и на ПК?