В нижнем регистре все заглавные буквы - чистый CSS

Я увидел эту тему здесь: Сначала введите строчный текст, а затем запишите его. Возможно ли это с помощью CSS?

Но это был не чистый CSS. У меня есть div, который содержит этот текст:

<div>
RaWr rAwR
</div>

Я хочу использовать css, чтобы он выглядел как "Rawr Rawr". Вырезать, если я просто преобразую текст-преобразование, он делает его "RaWr RAwR", и заглавные буквы остаются в верхнем регистре. Так что мне нужно сначала опустить регистр, а затем заглавную, это решение для его обертки в div?

Я попробовал обернуть его в другой div, но он не работал:

<style>
    #test3 { text-transform: lowercase; }
    #test3 div { text-transform: capitalize; }
</style>

<div id="test3"><div>RaWr rAwR</div></div>

ОТВЕТЫ

Ответ 1

К сожалению, вы не можете сделать это с помощью чистого CSS. На данный момент ваша лучшая надежда состоит в том, чтобы либо переписать текст, чтобы избежать медиальных/финальных капиталов, либо использовать JavaScript. (Да, мои глаза тоже катятся.)

Ваш предлагаемый подход не работает, потому что только одно значение свойства text-transform применяется к элементу за раз. Когда вы укажете что-то вроде...

#parent { text-transform: lowercase; }
#parent #child { text-transform: capitalize; }

... значение text-transform для дочернего элемента теперь capitalize, и ничего больше. Это единственное преобразование, применяемое к этому элементу.

Существует проект предложения, позволяющий авторам определять настраиваемые таблицы сопоставления с правилом @text-transform, но, поскольку он стоит, я сомневаюсь, что это работа для этого сценария. Проблема состоит в том, что дескриптор scope (где в слово применяется преобразование) принимает только одно значение - вы можете определить преобразование в целом слово или некоторая комбинация начальной, конечной или средней части слова, но это не очевидно, если у вас могут быть разные преобразования для каждой части.

Это, по-видимому, подтверждено в Проблема 8 в проекте проекта вики, а несколько преобразований обсуждались пару лет назад WWW-стиль. В этом потоке предполагается, что для элемента должно быть разрешено только одно значение text-transform, и это объединение должно выполняться в правиле @text-transform; однако в черновике примечания:

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

Итак, правило вроде этого не работает:

@text-transform lowercase-then-capitalize {
    transformation: lowercase, "a-z" to "A-Z" single;
    scope: initial;
}

Я вижу три очевидных решения:

  • разрешить несколько значений scope в правиле @text-transform;
  • добавить дескриптор для наследования предыдущего преобразования без переопределения его значения области; или
  • разрешить несколько значений text-transform для селектора.

Список рассылки www-стиля может быть хорошим местом для этого, если вы когда-нибудь захотите увидеть чистое решение CSS для этого вопроса.

Ответ 2

Это нужно делать, когда у вас есть одиночные слова в разных div

#test3 { text-transform: lowercase; }

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


<div id="test3">haLLo</div>

Ответ 3

Вы используете вложенный div,

Итак, #test3 { text-transform: lowercase; } применяется для родителя div, поэтому применяется как для родительских, так и для дочерних разделов

когда вы переопределяете #test3 div { text-transform: capitalize; } в Child Div, первый стиль text-transform: lowercase; игнорируется

Ответ 4

К сожалению, до CSS-3 нет способа сделать это чистым способом CSS, поскольку этот документ имеет только 5 возможных значений text-transform, и ни одно из них не решит это требование!

Но в будущем может быть предусмотрено настраиваемое правило для текстового преобразования, аналогичное Counter Sytle