Первая буква Заглавные буквы и другие буквы в нижнем регистре в css?

<p>THIS IS SOMETEXT</p>

Я хочу, чтобы это выглядело так. This is sometext котором первая буква абзаца имеет верхний регистр.
Возможно ли это в CSS?

Изменить: весь мой текст заглавными буквами.

Ответы

Ответ 1

Вы можете использовать text-transform, чтобы каждое слово абзаца было капитализировано следующим образом:

p { text-transform: capitalize; }

Он был поддержан в IE4+. Пример здесь.

16.5. Капитализация: свойство "текстовое преобразование"

Это свойство управляет эффектами капитализации текста элемента.

capitalize Помещает первый символ каждого слова в верхнем регистре; другие символы не затронуты.


Создание каждого слова в верхнем регистре, с заглавной буквы:

В этом предположении было следующее:

Я хочу сделать так: This Is Sometext

Вы должны обернуть каждое слово с помощью элемента оболочки, такого как <span> и использовать :first-letter псевдо-элемент с первой буквой, чтобы преобразовать первую букву каждого слова:

<p>
  <span>THIS</span> <span>IS</span> <span>SOMETEXT</span>
</p>
p { text-transform: lowercase; }    /* Make all letters lowercase */
p > span { display: inline-block; } /* :first-letter is applicable to blocks */

p > span:first-letter {
  text-transform: uppercase;        /* Make the first letters uppercase      */
}

Пример здесь.

Кроме того, вы можете использовать JavaScript, чтобы обернуть каждое слово элементом <span>:

var words = $("p").text().split(" ");
$("p").empty();

$.each(words, function(i, v) {
    $("p").append($("<span>").text(v)).append(" ");
});

Пример здесь.


Создание первой буквы верхнего регистра, с заглавной буквы:

Кажется, это то, что вы действительно ищете, это довольно просто, все, что вам нужно сделать, это сделать все слова в нижнем регистре, а затем преобразовать первую букву абзаца в верхний регистр:

p { text-transform: lowercase; }

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

Пример здесь.

Ответ 2

Попробуй это:

<style>
p {
    text-transform: lowercase;
}


p:first-letter {
    text-transform: uppercase;
}
</style>

Ответ 3

я понял

p {
    text-transform: lowercase;
}

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