Сделать первый символ в верхнем регистре в 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

34

CSS: селектор первой буквы

или :

text-transform: capitalize;

— Амр Элгархи
источник

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;

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

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