Почему Css text-transform не работает? - PullRequest
Новая
       10

Почему Css text-transform не работает?

0 голосов
/ 04 сентября 2018

У меня есть пример текста и все это в верхнем регистре. Я хочу, чтобы текст был заглавным, но css text-transform не работает. Как я могу это сделать? 

span,
a,
h2 {
  text-transform: capitalize !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<span class="ml-5 mt-5 d-block">IT IS AN EXAMPLE TEXT</span>

<h2><a class="ml-5 mt-5 d-block" href="#">IT IS AN EXAMPLE TEXT IN HREF</a></h2>

И вы можете проверить JSFiddle

Я хочу, чтобы первая буква была заглавной, остальные - для всех слов. Как это: 

It Is An Example Text

Ответы [ 3 ]

0 голосов
/ 04 сентября 2018 

span,
a,
h2 {
  text-transform: lowercase !important;
}
span:first-letter,
a:first-letter,
h2:first-letter {
  text-transform: capitalize !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<span class="ml-5 mt-5 d-block">IT IS AN EXAMPLE TEXT</span>

<h2><a class="ml-5 mt-5 d-block" href="#">IT IS AN EXAMPLE TEXT IN HREF</a></h2>
0 голосов
/ 04 сентября 2018

Вы можете использовать JavaScript, чтобы сначала преобразовать все буквы в строчные. Затем используйте /\b(\w)/g для сопоставления вхождений первых букв, затем используйте toUpperCase() на каждом 

document.querySelector("a").innerText = document.querySelector("a").innerText.toLowerCase().replace(/\b(\w)/g, x => { return x.toUpperCase(); });
<h2><a class="ml-5 mt-5 d-block" href="#">IT IS AN EXAMPLE TEXT IN HREF</a></h2>
0 голосов
/ 04 сентября 2018

Использование заглавных букв влияет только на первые буквы слов. Это не изменит регистр остальных букв в слове. Например, если вы используете заглавные буквы уже прописными буквами, остальные буквы в слове не переключатся на строчные. Это хорошо, когда ваш текст содержит аббревиатуру или аббревиатуру, которая не должна содержать строчных букв.

Если вы измените предоставленный текст на строчные, вы увидите, что он работает просто отлично!

Но чтобы получить полный ответ, я попытаюсь найти способ извлечь выгоду из желаемого способа независимо от ввода.

Кажется, это невозможно только с помощью CSS, для чего-то, кроме текста из одного слова, если вы не заключаете каждое слово в другой элемент.

Фрагмент одного слова 

span,
a,
h2 {
   text-transform:lowercase
}

span:first-letter,
a:first-letter,
h2:first-letter {
  text-transform: capitalize;
}
...