Не работает ::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;
}

<span class="search-number__tcountry">UNITED STATES</span>

Answer 1

В доках написано что нужен именно блочный элемент, например p или div:

.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;
}

<p class="search-number__tcountry">UNITED STATES</p>
<span class="search-number__tcountry">UNITED STATES</span>
<div class="search-number__tcountry">UNITED STATES</div>
<div>
  <span class="search-number__tcountry">UNITED STATES</span>
</div>

БЛОГ НА HUSL

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

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