6 Stimmen

Konvertierung aller Großbuchstaben in Init Caps

Ich habe mich gefragt, ob es eine Möglichkeit gibt, nur mit CSS (und das kann browser-spezifisches CSS sein) alle Großbuchstaben in Wörter umzuwandeln, die zum Beispiel nur am Anfang großgeschrieben werden:

I YELL WITH MY KEYBOARD

umgewandelt werden würde:

I Yell With My Keyboard

EDIT: Ich habe gemerkt, dass ich mich in meiner Frage nicht klar genug ausgedrückt habe. Der Text wurde in Großbuchstaben eingegeben, nicht in Kleinbuchstaben, text-transform: capitalize funktioniert nicht bei Daten, die so eingegeben wurden, wie es scheint.

9voto

David Punkte 682

Es gibt einige Möglichkeiten, die Sie mit CSS für Texttransformationen nutzen können, hier sind alle.

.Capitalize
{ text-transform: capitalize }

.Uppercase
{ text-transform: uppercase }

.Lowercase
{ text-transform: lowercase }

.Nothing
{ text-transform: none }

Leider gibt es keine Camel Case Texttransformation.

Sie können immer Javascript verwenden, um den Text entsprechend umzuwandeln, oder wenn Sie eine Skriptsprache wie PHP oder ASP verwenden, können Sie ihn dort ändern.

Hier ein Beispiel aus der strtoupper-PHP-Doku-Seite:

function strtocamel($str, $capitalizeFirst = true, $allowed = 'A-Za-z0-9') {
    return preg_replace(
        array(
            '/([A-Z][a-z])/e', // all occurances of caps followed by lowers
            '/([a-zA-Z])([a-zA-Z]*)/e', // all occurances of words w/ first char captured separately
            '/[^'.$allowed.']+/e', // all non allowed chars (non alpha numerics, by default)
            '/^([a-zA-Z])/e' // first alpha char
        ),
        array(
            '" ".$1', // add spaces
            'strtoupper("$1").strtolower("$2")', // capitalize first, lower the rest
            '', // delete undesired chars
            'strto'.($capitalizeFirst ? 'upper' : 'lower').'("$1")' // force first char to upper or lower
        ),
        $str
    );
}

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X