Зробіть верхній регістр першого символу в CSS

255

Чи є спосіб зробити верхній регістр символу в мітці в 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

622

Для цього є властивість:

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

ви можете скористатися подвійною двокрапкою, див. css-tricks.com/almanac/selectors/f/first-letter

— ndequeker

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}

— Логус
джерело

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

Привіт, зверніть увагу: "початкове" перетворення тексту не означає "написання великої літери на першому". Скоріше, це означає "повернути до початкового значення за замовчуванням для цього властивості".

— Маркос Буарке

Дякую, я застосував обидва рекомендовані виправлення.

— Marcos Buarque

5

Спершу зробіть це маленькими літерами:

.m_title {text-transform: lowercase}

Потім зробіть це з великої літери першої літери:

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

"текст-перетворення: великі літери" працює для слова; але якщо ви хочете використовувати для речень це рішення ідеально.

— OzgurG
джерело

2

: перший лист не працює з 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>

— Гнана Секар
джерело

це працює мені. концепція ..параграф кожне слово у вікні першої літери

— Gnana Sekar

-2

Я рекомендую вам використовувати наступний код у CSS:

    text-transform:uppercase;

Переконайтесь, що ви поставили його у своєму класі.

— Кевін Девіс
джерело