CSS text-transform использует все заглавные буквы

Question

Вот мой HTML:

<a href="#" class="link">small caps</a> & 
<a href="#" class="link">ALL CAPS</a>

Вот мой CSS:

.link {text-transform: capitalize;}

Вывод:

Small Caps & ALL CAPS

и я хочу, чтобы результат был:

Small Caps & All Caps

Есть идеи?

Answer 1

После долгих исследований я обнаружил, что функция / выражение jquery изменяет текст в первой букве только в верхнем регистре, поэтому я соответствующим образом модифицирую этот код, чтобы сделать его работоспособным для поля ввода.Когда вы напишите что-то в поле ввода, а затем перейдете к другому полю или элементу, текст этого поля изменится только с использованием заглавной буквы.Независимо от того, какой пользователь вводит текст в заглавных или строчных буквах:

Следуйте этому коду:

Шаг 1: Вызвать библиотеку jquery в заголовке HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Шаг 2: Введите код для изменения текста полей ввода:

<script>
$(document).ready(function(){
$("#edit-submitted-first-name,#edit-submitted-last-name,#edit-submitted-company-name, #edit-submitted-city").focusout(function(){
var str=$(this).val();
str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
    return letter.toUpperCase();
});
$(this).val(str);
 });});

 </script>

Шаг 3: Создайте поля ввода HTML с теми же идентификаторами, которые вы используете вКод jquery, такой как:

<input type="text" id="edit-submitted-first-name" name="field name">

Идентификатор этого поля ввода: edit-submit-first-name (используется в коде jquery на шаге-2)

**Результат: убедитесь, что текст изменится после перемещения фокуса из этого поля ввода на другой элемент.Потому что здесь мы используем фокусирующее событие jquery.Результат должен выглядеть так: Тип пользователя: «спасибо», он будет меняться на «Спасибо».**

Удачи

Answer 2

, если вы используете jQuery;это один из способов сделать это:

$('.link').each(function() {
    $(this).css('text-transform','capitalize').text($(this).text().toLowerCase());
});

Вот более легкая для чтения версия, которая делает то же самое:

//Iterate all the elements in jQuery object
$('.link').each(function() {

    //get text from element and make it lower-case
    var string = $(this).text().toLowerCase();

    //set element text to the new string that is lower-case
    $(this).text(string);

    //set the css to capitalize
    $(this).css('text-transform','capitalize');
});

Демо

Answer 3

Я знаю, что это поздний ответ, но если вы хотите сравнить производительность различных решений, у меня есть jsPerf, который я создал.

Решения Regex самые быстрые.

Вот jsPerf: https://jsperf.com/capitalize-jwaz

Существует 2 решения регулярных выражений.

Первый использует /\b[a-z]/g. Граница слова будет состоять из таких слов, как нераскрытие и нераскрытие.

Если вы хотите использовать только заглавные буквы, которым предшествует пробел, используйте второе регулярное выражение

/(^[a-z]|\s[a-z])/g

Answer 4

все неправильно, он существует -> вариант шрифта: маленькие заглавные буквы;

текст-преобразования: капитализировать; только заглавная буква