Принудительно вводить заглавные буквы в заголовок в CSS с помощью преобразования текста

Я создаю тему для CMS и имею только возможность изменять CSS, связанный со страницей (без Javascript, PHP и т.д.).

Есть ли способ изменить этот список пользователей, которые у нас есть:

ДЖОН СМИТ
ДАВИД ДЖОНС
...

в правильный заголовок (John Smith и т.д.) с использованием CSS?

text-transform: lowercase; работает нормально (john smith и т.д.), но text-transform: capitalize; ничего не делает (остается заглавной).

В соответствии с запросом, HTML:

<tr> [...] <td class="cell c1">ALEXANDER MULLER</td> [...] </tr>
<tr> [...] <td class="cell c1">JOHN SMITH</td> [...] </tr>

И CSS:

td {
    text-transform: capitalize;
}

Ответы

Ответ 1

text-transform: capitalize; изменяет только первую букву каждого слова, поэтому, если первая буква слова уже заглавная, текст-преобразование пропускает это слово.

Пример:

JoHN smith станет JoHN smith

Невозможно сделать обложку с использованием только CSS, если все ваши слова не имеют нижнего регистра.

Ответ 2

Мы можем использовать трюк, чтобы сделать это. Но следите за совместимостью с браузером. https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

p{
  text-transform: lowercase;
 }

p:first-letter{
  text-transform: uppercase;
}

Например:

   это какой-то текст.   Это НЕКОТОРЫЙ текст.   это ТЕКСТ.

Выход → Это текст

Ответ 3

То, что вы переживаете, это то, как это работает. Это от спецификация:

" капитализировать. символ каждого слова в верхнем регистре; другие символы не затронуты".

Теперь вы можете сделать (я предполагаю, что у вас есть список с тегами <li> элементов списка:

li:first-letter {
    text-transform: uppercase;
}

Наряду с вашим строчным строком li, но в комбинации, который повлияет только на первые слова каждой строки, вы получите:

John smith
David jones

Я не верю, что здесь есть чистое решение для CSS. Это сложно из-за таких имен, как Джон Маккейн, Оскар де ла Хойя, доктор Джон Смит, доктор Джейн Смит и люди, которые предпочитают вести себя в нижнем регистре, например, данах бойд или т.д. Каммингс. Всегда есть исключения, когда вы пытаетесь использовать Title Case. Эти исключения вызовут головные боли. Если у вас нет контроля над содержимым, содержимое даст вам головные боли.

Ответ 4

В вашей ситуации единственным способом, с которым я когда-либо работал, является использование javascript. Как утверждают другие ответы, преобразование capize не делает трюк.

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

Эндрю

Ответ 5

Я столкнулся с этой проблемой много раз, когда текст вошел в верхний регистр из CMS или базы данных. Я использую функцию jQuery.each для итерации по выбранным элементам, применяю метод javascript toLowerCase для каждого, а затем используйте CSS для установки text-transform: capize.

Работает каждый раз!

Ответ 6

Это показывает, что text-transform: capize работает для меня в IE, Chrome и FF для Windows:

http://www.tizag.com/cssT/text.php

Что вы используете, чтобы попробовать?

Ответ 7

Я знаю, что вопрос был только о CSS. Поскольку большинство представлений в настоящее время относятся к моделям, это может кому-то помочь.

   <div style="text-transform: capitalize;">
      {{ person.firstName.toLowerCase() }}
   </div>