Вопрос по css, string, text – Принудительный ввод заглавных букв в регистр заголовков в CSS с использованием преобразования текста

17

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

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

JOHN SMITH
DAVID JONES
...

в правильном случае заголовка (Джон Смит и т. д.) с использованием CSS?

text-transform: lowercase; работает хорошо (Джон Смит и т. д.), ноtext-transform: capitalize; ничего не делает (остается заглавной)

По запросу, HTML-код:

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

И CSS это:

<code>td {
    text-transform: capitalize;
}
</code>
Можете ли вы вставить HTML и CSS, которые вы используете? Paul Sheldrake

Ваш Ответ

6   ответов
6

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

"capitalize Puts the first character of each word in uppercase; other characters are unaffected."

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

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

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

John smith
David jones

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

3

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

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

Эндрю

22

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

Пример:

JoHN smith станетJoHN Smith

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

Ах, хорошо - всем, спасибо, что нашли время, чтобы ответить в любом случае. alexmuller
Этот ответ верен, если ваше решение может использовать только CSS. Но если контекст является темой Wordpress, вы можете легко достичь желаемого результата, добавивstrtolower( $text ) в шаблоне PHP, затем с помощьюtext-transform : capitalize;, Это создаст разметку в нижнем регистре, которую вы можете затем преобразовать в регистр заголовков с помощью css.
0

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

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

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

7

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

p{
  text-transform: lowercase;
 }

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

Например:

this is some text.

     Это НЕКОТОРЫЙ текст.

     это какой-то текст.

Выход - & gt; Это какой-то текст

2

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

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

Я должен был упомянуть, что этот метод преобразует любой текст в заголовок. Это изменит такие вещи, как & quot; IBM & quot; на «Ibm» или «McDonalds»; на "Макдональдс". Чтобы исключить эти сценарии, вы должны будете использовать квалификатор regex и / или проверить каждую запись в базе данных или наборе данных.

Похожие вопросы