Как преобразовать заглавный текст в заголовок с помощью CSS
Если Вы читаете это, вы, вероятно, заметили, что свойство CSS text-transform:capitalize; не преобразует это в это. Вместо этого не начальные символы остаются заглавными, поэтому преобразование в этом случае не имеет никакого эффекта. Так как же мы можем достичь этого результата?
Я видел, что это часто спрашивают, и большинство ответов быстро продвигают использование javascript для этого. Это будет работать, но это не нужно, если вы пишете или настраиваете шаблон / тему для PHP CMS, такой как Wordpress, Друпал или Joomla.
5 ответов
плохая новость в том, что нет такой вещи, как text-transform : title-case что гарантировало бы результат для того чтобы быть cased названием. Хорошей новостью является то, что есть способ сделать это, который не требует 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>
?>
надеюсь, это кому-то поможет. Удачи в кодировании.
в некоторой степени вы можете достичь этого с помощью 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>вот рабочий пример на веб-сайте Joomla 1.5.22 под управлением Virtuemart 1. Цель состоит в том, чтобы взять строку, которая изначально находится в верхнем регистре, и преобразовать ее в правильный регистр.
верхний:
<?php echo $list[$i]->name; ?>
Конкретном Случае:
<?php echo ucwords( strtolower($list[$i]->name) ); ?>