web-dev-qa-db-ja.com

すべて小文字にして大文字にする-純粋な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>
capitalizecss
19
Noitidart

残念ながら、純粋なCSSではこれを行うことはできません。現時点では、中央/最終的な大文字を回避するためにテキストを書き直すか、JavaScriptを使用することをお勧めします。 （はい、私の目も回転しています。）

一度に1つの要素に適用されるtext-transformプロパティ値は1つだけなので、提案されたアプローチは機能しません。次のようなものを指定すると…

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

…子要素のtext-transformの値はcapitalizeになりました。これがその要素に適用される唯一の変換です。

作成者が @text-transformルールを使用してカスタムマッピングテーブルを定義することを許可するドラフトの提案があります 現状では、このシナリオではうまくいくとは思えません。問題は、 scope記述子 （Wordで変換が適用される場所）が1つの値しかとらないことです。Word全体、または開始、終了、またはWordの中間部分ですが、部分ごとに異なる変換を行うことができるかどうかは明らかではありません。

これはwikiドラフトの提案のIssue 8で認められているようで、 複数の変換が2、3年前にwww-styleで議論されました 。そのスレッドでは、単一のtext-transform値のみが要素で許可されるべきであり、その結合は@text-transformルールで行われるべきであることが提案されています。ただし、仕様草案には次のように記載されています。

参照されるテキスト変換のスコープが、それらを参照するテキスト変換で指定されたスコープと異なる場合、2つのスコープの共通部分に適用されます。

したがって、このようなルールは機能しません：

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

私は3つの明白な解決策を見ることができます：

  1. @text-transformルールで複数のscope値を指定できるようにします。
  2. 以前の変換を継承する記述子を追加しますスコープ値をオーバーライドせずに。または
  3. セレクターに複数のtext-transform値を許可します。

www-スタイルのメーリングリスト は、この質問に対する純粋なCSSソリューションを見たい場合、これを行うのに適した場所です。

11
Jordan Gray

これは、異なるdivに単一の単語がある場合に行う必要があります

#test3 { text-transform: lowercase; }

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


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

ネストされたdivを使用している、

そう #test3 { text-transform: lowercase; }は親divに適用されるため、親と子の両方のDivに適用されます

#test3 div { text-transform: capitalize; }をChild Divに最初のスタイルtext-transform: lowercase;は無視されます

1
Sam1604

残念ながら、CSS-3までは、純粋なCSSの方法でこれを行う方法はありません。 this ドキュメントのように、text-transformに指定できる値は5つしかなく、どれもこの要件を解決しません。

ただし、将来的には Counter Sytle に類似したテキスト変換のカスタムルールが提供される可能性があります

1
Yogesh