Большая буква первая css: Делаем первую букву в строке заглавной на PHP/jQuery/CSS – строчные и заглавные буквы — учебник CSS

Leave a Comment / Css / By /

Содержание

Css первая буква заглавная остальные строчные. Делаем заглавные буквы css стилями с использованием псевдоэлементов

Результат

Однако не все так просто. Присутствуют некоторые нюансы. Если обратить внимание на второй абзац вышеприведенного примера, то можно заметить, что слово capitalize , несмотря на примененное к абзацу свойство text-transform со значением capitalize , отображается полностью из прописных букв, что соответствует исходному тексту. Объясняется это тем, что при указанном значении capitalize проверяется только первые буквы слов, а остальные остаются неизменными, независимо от их первоначального состояния.
Несмотря на внешнюю простоту, свойство text-transform может оказаться очень полезным. Например, для того, чтобы сделать текст всех заголовков h2 вашего сайта прописным, достаточно лишь добавить в таблицу стилей одно свойство

h2 {text-transform: uppercase;}

и проблема будет решена. И не потребуется вручную изменять все заголовки, которых может быть очень и очень много.

CSS заглавные буквы помогают разбить монотонность однотипного дизайна, тексты которого выглядят одинаково от начала до конца.

Буквицы раньше и сейчас

Летописцы использовали заглавные буквы в рукописях, которые писались от руки, некоторые из них относятся еще к V веку. Прописные буквы продолжали использоваться с VIII по XV век, когда типографские станки позволили вывести печать на промышленный уровень. И рукописные, и печатные буквицы размещались в начале текста. Часто их украшали декоративным рисунком, который располагался вокруг буквы.

Поднятые и опущенные буквы все еще используются в наши дни. Их можно встретить в газетах, журналах и книгах, а также в цифровой типографии. Поднятые литеры иногда называются вытянутыми. Они размещаются на одном уровне с нижней частью текста, который следует за ними. Опущенные буквы размещаются на одном уровне с верхней частью текста, иногда в слое позади основной части текстового контента, или остальной текст обтекает их.

Поднятые буквы задаются намного проще, так они находятся на одном уровне с остальным текстом, и обычно для этого не нужно менять обтекание внешних полей. Опущенные буквы требуют более тонкой настройки. Вам будет проще разобраться с этим, если сначала вы поймете, как обрабатываются поднятые литеры.

Использование классов

Дизайнеры, которые уже имеют представление о CSS , знают, что нужно создать отдельный класс CSS для первой

Как сделать первую букву заглавной с помощью css

Я хочу сделать свое первое письмо в <span> году в столице. Но когда я использую :before в span заглавной буквы не работает.

span { display:inline-block; color:#66a400; }
span:first-letter { text-transform:capitalize; }
span:before { content:"-"; padding:0 2px; }

<span>my first word</span>

Мне нужно выйти, как показано ниже

- My first word
css css3

Поделиться Источник Code Maker     08 февраля 2017 в 09:38

4 Ответов


4

Вы можете использовать :after вместо :before и переместить его влево:

span {
  display: inline-block;
  color: #66a400;
}
span:first-letter {
  text-transform: capitalize;
}
span:after {
  content: "-";
  padding: 0 2px;
  float: left;
}
<span>my first word</span>

Поделиться dfsq     08 февраля 2017 в 09:43


2

Это проблема из-за селектора span:before , см. ниже.

От https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

Первая буква элемента не обязательно тривиальна для идентификации: …

Наконец, комбинация псевдо-элемента:: before и свойства content может вводить некоторый текст в начале элемента. В этом случае:: first-letter будет соответствовать первой букве этого генерируемое содержимое.

Если вы хотите, чтобы «-» перед содержимым с первой буквой заглавной буквы, вы можете сделать следующее, изменив свою структуру и css

CSS

span { display:inline-block; color:#66a400; }
span#before::before { content:"- "; padding:0 2px; }
span#content { text-transform:capitalize; }

HTML

<span></span><span>my first word</span>

Поделиться Massimo     08 февраля 2017 в 10:02


1

span { display:inline-block; color:#66a400; }

span:before { содержание:»-«; padding:0 2 пикселя; } промежуток { text-transform:capitalize; }

<p><span>my</span> first word</p>

Поделиться sneha     08 февраля 2017 в 10:38


0

Попробовать следующее:

span::first-letter { 
    text-transform: uppercase;
}

Поделиться Hamza Ishak     08 февраля 2017 в 09:41


сделать заглавной первую букву имени

У меня есть переменная типа $fullname = dwayne-johnson; Как я могу сделать d из первой буквы слова Дуэйн и j из слова Джонсон? например, я хочу сделать заглавную букву первой буквой каждого слова,…


Возвращая первую букву NSString с заглавной буквы

Я хотел бы вернуть первую букву NSString с заглавной буквы. У меня есть UISearchDisplayController , который отображает названия разделов в соответствии с названием результатов поиска. — (NSString…


Как прописать первую букву только с помощью CSS в каждом случае

Я хочу прописать только первую букву, а другие должны быть маленькими , используя CSS Строка есть: SOMETHING BETTER sOMETHING bETTER Something better но результат должен быть Something Better…


Regex чтобы сделать последнюю букву заглавной

Поэтому я получил regex, чтобы сделать первую букву заглавной, но теперь мне нужно regex, чтобы сделать последнюю букву заглавной, я пробовал поиск в google и ничего не нашел Пример того, о чем я…


Как сделать первую букву каждого слова в качестве заглавной буквы в SAP HANA

Есть ли у нас какой-либо метод, чтобы сделать первую букву каждого слова в качестве заглавной буквы для столбца в SAP HANA? т. е. от ask question до Ask Question


Как сделать первую букву слова заглавной?

У меня есть слово default , и я хочу, чтобы функция php делала только первую букву прописной. Мы можем это сделать. Пожалуйста, помогите мне, так как я очень новичок в кодировании php.


Отделите первую букву от строки для заглавной буквы

Я хочу взять строковый ввод от пользователя и отформатировать его так, чтобы первая буква была заглавной, а rest-нет. Я хотел бы сделать это, разделив первую букву из строки и используя…


Как прописать первую букву строки в Java?

Я использую Java, чтобы получить вход String от пользователя. Я пытаюсь сделать первую букву этого ввода заглавной. Я попробовал это сделать: String name; BufferedReader br = new…


Как мне прописать первую букву слова в Vim?

Уже давно я знаю, что могу использовать ~ в Vim для переключения регистра символа. Но есть ли способ сопоставить ключ, чтобы прописать Слово и вернуться к предыдущей позиции? Например: I like to…


Как заменить заглавную букву, за которой следует точка, только заглавной буквой?

В любое время, когда строка содержит заглавную букву, за которой следует точка, я хотел бы заменить заглавную букву и точку только заглавной буквой. Today MR. Johnson walked to the mail box. =>…


Начало параграфа с большой буквы CSS

Лого SiteHere.ru