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

Вот мой 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

Любые идеи?

Нет способа сделать это с помощью CSS, вы можете использовать для этого PHP или Javascript.

Пример PHP:

$text = "ALL CAPS";
$text = ucwords(strtolower($text)); // All Caps

Пример jQuery (теперь это плагин!):

// Uppercase every first letter of a word
jQuery.fn.ucwords = function() {
  return this.each(function(){
    var val = $(this).text(), newVal = '';
    val = val.split(' ');

    for(var c=0; c < val.length; c++) {
      newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length) + (c+1==val.length ? '' : ' ');
    }
    $(this).text(newVal);
  });
}

$('a.link').ucwords();​

Вы почти можете сделать это с помощью:

.link { text-transform: lowercase; }
.link:first-letter { text-transform: uppercase; }

Это даст вам результат:

Small caps
All caps

Конвертируйте с помощью JavaScript, .toLowerCase()а capitalizeвсе остальное сделает.

Интересный вопрос!

capitalizeпреобразует каждую первую букву слова в верхний регистр, но не преобразует остальные буквы в нижний регистр. Даже :first-letterпсевдокласс не сократит его (потому что он применяется к первой букве каждого элемента, а не к каждому слову), и я не вижу способа комбинировать строчные буквы и заглавные буквы для получения желаемого результата.

Насколько я понимаю, это действительно невозможно сделать с помощью CSS.

@Harmen показывает в своем ответе красивые обходные пути PHP и jQuery.

Я хотел бы предложить решение на чистом CSS , которое более полезно, чем представленное решение с первой буквой, но также очень похоже.

.link {
  text-transform: lowercase;
display: inline-block;
}

.link::first-line {
  text-transform: capitalize;
}

<div class="link">HELLO WORLD!</div>
<p class="link">HELLO WORLD!</p>
<a href="#" class="link">HELLO WORLD!  ( now working! )</a>

Хотя это ограничено первой строкой, это может быть полезно для большего количества вариантов использования, чем решение с первой буквой, поскольку оно применяет заглавные буквы ко всей строке, а не только к первому слову. (все слова в первой строке) В конкретном случае OP это могло бы решить эту проблему.

Примечания: Как упоминалось в первых буквах комментариев к решению, порядок правил CSS важен! Также обратите внимание, что я изменил <a>тег для <div>тега, потому что по какой-то причине псевдоэлемент ::first-lineне работает с <a>тегами изначально, но либо, <div>либо <p>все в порядке. EDIT:<a> элемент будет работать , если display: inline-block;это добавляется к .linkклассу. Спасибо Дэйву Лэнду за то, что заметил это!

Новое примечание: если текст переносится, он теряет регистр, потому что теперь он фактически находится во второй строке (первая строка все еще в порядке).

JavaScript:

var links = document.getElementsByClassName("link");
for (var i = 0; i < links.length; i++) {
  links[i].innerHTML = links[i].innerHTML.toLowerCase();
}

CSS:

.link { text-transform: capitalize; }

То, что Хан «в итоге сделал» (что для меня чище и сработало), указано в комментариях к сообщению, отмеченному как ответ.

captializeвлияет только на первую букву слова. http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

Может быть полезно для java и jstl.

1. Инициализировать переменную локализованным сообщением.
2. После этого его можно использовать в функции jstl toLowerCase.
3. Преобразование с помощью CSS.

В JSP

1.

<fmt:message key="some.key" var="item"/>

2.

<div class="content">
  <a href="#">${fn:toLowerCase(item)}</a>
</div>

В CSS

3.

.content {
  text-transform:capitalize;
}

Вы можете сделать это с помощью первой буквы css! например, я хотел это для меню:

a {display:inline-block; text-transorm:uppercase;}
a::first-letter {font-size:50px;}

Он работает только с блочными элементами - поэтому встроенный блок!

Если данные поступают из базы данных, как в моем случае, вы можете уменьшить их перед отправкой в ​​список выбора / раскрывающийся список. Жаль, что вы не можете сделать это в CSS.

После большого исследования я обнаружил, что функция / выражение 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. Результат должен быть таким: Тип пользователя: «спасибо» он изменится на «Спасибо». **

Удачи

Решение PHP в бэкэнде:

$string = `UPPERCASE`
$lowercase = strtolower($string);
echo ucwords($lowercase);

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

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

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

Есть 2 решения для регулярных выражений.

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

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

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

если вы используете 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');
});

демонстрация

все не так, оно существует -> font-option: small-caps;

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