Все строчные буквы, а затем заглавные - чистый 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>

css capitalize
person Noitidart    schedule 17.02.2014    source источник
comment
Как указано в комментариях к вашему связанному вопросу, это невозможно сделать с помощью чистого CSS. Вам нужно будет использовать Javascript.   -  person Curt    schedule 17.02.2014
comment
да, я попробовал это, чувак, мне было интересно, есть ли какие-нибудь новые способы, bisdato дал интересное решение ниже   -  person Noitidart    schedule 17.02.2014

Ответы (4)


arrow_upward
14
arrow_downward

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

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

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

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

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

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

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

Таким образом, подобное правило не будет работать:

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

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

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

Если вы когда-либо хотели увидеть решение этого вопроса на чистом CSS.

person Jordan Gray    schedule 17.02.2014
comment
Искреннее спасибо за этот чрезвычайно отличный ответ! Теперь я знаю, что делать, когда они это реализуют. Большое спасибо! Я также теперь знаю, каковы текущие ограничения. - person Noitidart; 18.02.2014

arrow_upward
17
arrow_downward

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

#test3 { text-transform: lowercase; }

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


<div id="test3">haLLo</div>
person bdart    schedule 17.02.2014
comment
Работает только для первой буквы, хотя Rawr rawr не Rawr Rawr. - person AfromanJ; 17.02.2014
comment
Я не думаю, что это сработает, если внутри div есть несколько слов. - person Yogesh; 17.02.2014
comment
Ах это приятно! По крайней мере, он получает это, если у него есть одно слово. Нет необходимости в обертке на этом тоже, мне это нравится. Я учту это на будущее, но сейчас это мне не поможет :( Все еще +1 - person Noitidart; 17.02.2014
comment
Это помогло мне в моем случае, спасибо! - person catch22; 14.01.2016
comment
это должно быть '#test3::first-letter {' - person François Romain; 03.03.2016
comment
Это должен быть принятый ответ - person IntoTheDeep; 31.01.2018
comment
Я согласен, что этот ответ более полезен, чем принятый ответ, но он также не совсем отвечает на вопрос. Как упоминает Нойтидарт, это будет работать только в том случае, если в элементе есть только 1 слово. - person HankScorpio; 21.01.2020

arrow_upward
1
arrow_downward

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

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

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

person Sam1604    schedule 17.02.2014
comment
ах да, это не работает :( я надеялся на решение без вложения - person Noitidart; 17.02.2014

arrow_upward
1
arrow_downward

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

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

person Yogesh    schedule 17.02.2014
comment
до CSS-3? Что может CSS 3? - person putvande; 17.02.2014
comment
как упоминалось в обновленном ответе, может быть положение, которое позволит нам настраивать text-transform правила. - person Yogesh; 17.02.2014