Как преобразовать текст UPPERCASE в заголовок с использованием CSS

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

Я часто это видел, и большинство ответов быстро продвигают использование javascript для этого. Это будет работать, но это необязательно, если вы пишете или настраиваете шаблон/тему для PHP CMS, например Wordpress, Drupal или Joomla.

Ответ 1

Плохая новость заключается в том, что нет такой вещи, как text-transform : title-case, которая гарантировала бы, что результат будет обрезанным. Хорошей новостью является то, что есть способ сделать это, что не требует javascript (как часто это предлагается для этой ситуации). Если вы пишете тему для CMS, вы можете использовать strtolower() и ucwords(), чтобы преобразовать соответствующий текст в заголовок.

ПЕРЕД (ЭТО НЕ РАБОТАЕТ):

<style>
.title-case{ text-transform:capitalize; }
</style>
<span class="title-case">ORIGINAL TEXT</span>

ПОСЛЕ:

<?php echo ucwords( strtolower('ORIGINAL TEXT') ); ?>

Если вы пишете тему, вы, вероятно, будете работать с переменными вместо текстовых строк, но функция и концепция работают одинаково. Вот пример использования встроенной функции Wordpress get_the_title(), чтобы вернуть заголовок страницы как переменную:

<?php
$title = get_the_title();
$title = strtolower($title);
$title = ucwords($title); 
<h1>
<?php echo $title;
</h1> 
?>

Надеюсь, это поможет кому-то. Счастливое кодирование.

Ответ 2

В какой-то степени вы можете добиться этого с помощью CSS с использованием псевдо-класса:: first-letter и должны полностью вернуться к IE 5.5:-(

ПРИМЕЧАНИЕ. Это очень зависит от вашей структуры html и не будет работать во всех случаях, но может быть полезно время от времени. Нажмите "запустить фрагмент кода", чтобы увидеть результат ниже.

.progTitle {
    text-transform: lowercase;
}

.progTitle::first-letter {
    text-transform: uppercase;
}

<p class="progTitle">THIS IS SOME TEST TEXT IN UPPERCASE THAT WILL WORK. </p>
<p class="progTitle">this is some test text in lowercase that will work. </p>
<p class="progTitle"><i class="fa fa-bars"></i> THIS WILL NOT WORK </p>

Ответ 3

Вот рабочий пример на веб-сайте Joomla 1.5.22 с Virtuemart 1. Цель состоит в том, чтобы взять строку, которая первоначально является UPPERCASE, и преобразовать ее в правильный случай.

ВЕРХНИЙ:

<?php echo $list[$i]->name; ?>

Правильный случай:

<?php echo ucwords( strtolower($list[$i]->name) ); ?>

Ответ 4

Это может быть достигнуто одним простым правилом:

text-transform: capitalize;

Ответ 5

Вы просто пишете text-transform: none;