CSS-преобразование текста используется на всех шапках

Ответ 1

Нет способа сделать это с помощью 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();​

Ответ 2

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

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

Он даст вам результат:

Small caps
All caps

Ответ 3

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

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

Итак, насколько я вижу, это действительно невозможно сделать с CSS.

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

Ответ 4

Преобразование с использованием JavaScript с помощью .toLowerCase() и capitalize сделает все остальное.

Ответ 5

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

Ответ 6

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

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

Ответ 7

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

• Инициализировать переменную локализованным сообщением.
• После этого его можно использовать в функции jstl toLowerCase.
• Преобразование с помощью 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;
}

Ответ 8

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

Ответ 9

Вы можете сделать это с помощью css first-letter! например, я хотел его для меню:

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

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

Ответ 10

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

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

Шаг 1: вызовите библиотеку jquery в html head:

<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-submitted-first-name (он используется в jquery-коде на этапе 2)

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

Желаем удачи

Ответ 11

link {text-transform: lowercase! important;}

ссылка: первая буква {text-transform: uppercase;}

capize преобразует каждую первую букву слова в верхний регистр, но не преобразует другие буквы в нижний регистр. Итак, используйте текстовое преобразование: верхний регистр в первой букве и текстовое преобразование: нижний регистр для остальных. Работал для меня.

Ответ 12

Я не смог прокомментировать Хармена из-за отсутствия репутации, так что снова написал тот же ответ. Я добавил LowerCase() в ответ, чтобы он мог преобразовать "ВСЕ CAPS" в "All Caps".

$.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).toLowerCase() + (c+1==val.length ? '' : ' ');
}
$(this).text(newVal);  
});
 $('a.link').ucwords();​ 

Ответ 13

все не так, как есть → font-variant: small-caps;

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