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

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

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

Это даст вам вывод:

Small caps
All caps

Answer 2

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

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

Answer 4

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

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

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

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

Answer 5

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 6

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

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

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

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

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

Answer 9

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

Answer 10

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

.link {
  text-transform: lowercase;
}

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

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

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

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

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