Wie konvertiere ich Text mithilfe von CSS von Kleinbuchstaben in Großbuchstaben?

CSS-Texttransformation: Kleinbuchstaben in Großbuchstaben umwandeln

Können Sie Text optimieren, um ihn mithilfe von CSS von Kleinbuchstaben in Großbuchstaben umzuwandeln?

Die Bedürfnisse verstehen

Stellen Sie sich ein Szenario vor, in dem Sie den Text folgendermaßen formatieren möchten:

• zuerst Kleinbuchstaben und dann nur den ersten Buchstaben jedes Wortes großschreiben .
• Eingabe: HELLO WORLD
• Ausgabe: Hello World

Ein anderes Beispiel könnte eine Liste von Ländern in Großbuchstaben sein, wie zum Beispiel: VEREINIGTES KÖNIGREICH, das Sie muss nach Vereinigtes Königreich konvertiert werden.

CSS-Implementierung

Ja, CSS stellt die Texttransformationseigenschaft bereit, um dies zu erreichen. Wenn Sie die Option auf „Großschreibung“ einstellen, können Sie den ersten Buchstaben jedes Wortes groß schreiben und gleichzeitig die restlichen Zeichen in Kleinbuchstaben umwandeln.

<code class="css">.className {
    text-transform: capitalize;
}</code>

Diese CSS-Regel gilt für Elemente mit dem Klassennamen className und wandelt deren Text entsprechend um .

Javascript-Lösung

Neben CSS kann auch JavaScript zur Texttransformation verwendet werden:

<code class="javascript">function capitalize(s) {
    return s.toLowerCase().replace(/\b./g, function (a) {
        return a.toUpperCase();
    });
}

console.log(capitalize('this IS THE wOrst string eVeR')); // "This Is The Worst String Ever"</code>

Diese Funktion akzeptiert einen String s als Eingabe, wandelt sie in Kleinbuchstaben um und verwendet dann einen regulären Ausdruck, um Wortgrenzen zu identifizieren (b) und das erste Zeichen jedes identifizierten Wortes groß zu schreiben.

Hinweis: Die Gutschrift für die JavaScript-Funktion geht verloren zur folgenden Ressource: Wörter in Zeichenfolge groß schreiben.

Das obige ist der detaillierte Inhalt vonWie konvertiere ich Text mithilfe von CSS von Kleinbuchstaben in Großbuchstaben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!