Сделать первый символ в верхнем регистре в CSS

255

Есть ли способ сделать первый символ Uppercase в метке в CSS.

Вот мой HTML:

<a class="m_title" href="">gorr</a>
<a class="m_title" href="">trro</a>
<a class="m_title" href="">krro</a>
<a class="m_title" href="">yrro</a>
<a class="m_title" href="">gwwr</a>
Развернуть фрагмент

css наслаждаться жизнью
источник
2
Для уточнения - первый символ и ТОЛЬКО первый. Что делает text-transform: capitalize;недостаточно при наличии нескольких слов
wiktus239

Ответы:

623

Для этого есть свойство:

a.m_title {
    text-transform: capitalize;
}

Если ваши ссылки могут содержать несколько слов и вы хотите, чтобы первая буква первого слова была заглавной, используйте :first-letterвместо нее другое преобразование (хотя это не имеет большого значения). Обратите внимание , что для того , чтобы :first-letterработать ваши aэлементы должны быть блок - контейнеров (которые могут быть display: block, display: inline-blockили любой из множества других комбинаций одного или нескольких свойств):

a.m_title {
    display: block;
}

a.m_title:first-letter {
    text-transform: uppercase;
}
BoltClock
источник
3
@alanjds: Да, это работает в каждой версии IE, которая поддерживает CSS. Это очень старая технология.
BoltClock
3
Вы можете использовать двойную точку с
запятой
5
@Voles: Конечно, если вам не нужно поддерживать IE8 и старше. Не говорю, что вы не можете использовать двойные двоеточия, если хотите. (Для чего это стоит, во время этого ответа, который был опубликован 2 с половиной года назад, моей личной политикой была поддержка IE8 по умолчанию. Сегодня я больше не делаю.)
BoltClock
1
Обратите внимание: если display: blockтребование (кто знает, почему это так) усложняет задачу, :first-letterтакже работает с ним display: inline-block.
Митя
1
@ Генри Гарсия де Гусман: Потому что это прописные буквы, а не только первая буква (каждого слова, предложения или чего-то еще).
BoltClock
55

Обратите внимание, что ::first-letterселектор не работает со встроенными элементами, поэтому он должен быть либо, blockлибо inline-blockследующим образом:

.m_title {display:inline-block}
.m_title:first-letter {text-transform: uppercase}
Logus
источник
1
В моем случае весь текст уже был прописными, поэтому мне пришлось добавить преобразование текста: строчные буквы в .m_title, и теперь он работает отлично!
Hjuster
15

Я предлагаю использовать

#selector {
    text-transform: capitalize;
}

или

#selector::first-letter {
    text-transform: uppercase;
}

Кстати, проверьте эту ссылку w3schools: http://www.w3schools.com/cssref/pr_text_text-transform.asp

Маурицио Баттагини
источник
2
Хороший ответ, но это определенно не ссылка на документацию по w3c.
Стефан
1
Эй, пожалуйста, обратите внимание: text-transform 'initial' не означает 'заглавная буква'. Скорее, это означает «вернуться к исходному значению по умолчанию для этого свойства».
Маркос Бурке
Спасибо, я применил оба рекомендуемых исправления.
Маркос Бурке
5

Сначала сделайте его строчным:

.m_title {text-transform: lowercase}

Затем введите заглавную букву первой буквы:

.m_title:first-letter {text-transform: uppercase}

«text-transform: capitalize» работает для слова; но если вы хотите использовать для предложений это решение идеально.

OzgurG
источник
2
: first-letter не работает с inlineэлементами, установите, display:inline-blockесли это ваш случай. ( stackoverflow.com/questions/7631722/… )
Fanky
1 
<script type="text/javascript">
     $(document).ready(function() {
     var asdf = $('.capsf').text();

    $('.capsf').text(asdf.toLowerCase());
     });
     </script>
<div style="text-transform: capitalize;"  class="capsf">sd GJHGJ GJHgjh gh hghhjk ku</div>
Гнана Секар
источник
это работа меня. концепция ... параграф каждого слова в дисплее заглавными
буквами
-2

Я бы порекомендовал вам использовать следующий код в CSS:

    text-transform:uppercase;

Убедитесь, что вы положили его в своем классе.

Кевин Дэвис
источник