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

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

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

Answer 2

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

Answer 3

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

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

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

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

Answer 4

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

Answer 5

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

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

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

Small caps 
All caps 

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

---

Какой хан «закончил делать» (который чище и работал для меня) приведен в комментариях сообщения, помеченного как ответ.

Answer 7

Может быть полезно для 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; 
} 

Answer 8

все неправильные не существует -> font-variant: small-caps;

text-transform: капитализировать; только первая заглушка для письма

Answer 9

Конвертировать с использованием JavaScript с использованием .toLowerCase() и capitalize остальное.

Answer 10

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

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

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

Answer 11

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

Выполните этот код:

Шаг 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"> 

Идентификатор этого поля ввода является:-первых, имя редактировать представил (Он использованием в Jquery кода на этапе -2)

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

удачи

Answer 12

я не смог комментировать Harmen из-за отсутствия репутации так писать снова тот же ответ Harmen. Я добавил 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();​ 

Answer 13

ссылка {текст-преобразования: строчные буквы важно,!}

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

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