CSS-Texttransformation nutzt alle Großbuchstaben

Hier ist mein HTML:

<a href="#" class="link">small caps</a> & 
<a href="#" class="link">ALL CAPS</a>

Hier ist mein CSS:

.link {text-transform: capitalize;}

Die Ausgabe ist:

Small Caps & ALL CAPS

und ich möchte, dass die Ausgabe ist:

Small Caps & All Caps

Irgendwelche Ideen?

Mit CSS ist dies nicht möglich. Sie können hierfür PHP oder Javascript verwenden.

PHP Beispiel:

$text = "ALL CAPS";
$text = ucwords(strtolower($text)); // All Caps

jQuery-Beispiel (es ist jetzt ein Plugin!):

// Uppercase every first letter of a word
jQuery.fn.ucwords = function() {
  return this.each(function(){
    var val = $(this).text(), newVal = '';
    val = val.split(' ');

    for(var c=0; c < val.length; c++) {
      newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length) + (c+1==val.length ? '' : ' ');
    }
    $(this).text(newVal);
  });
}

$('a.link').ucwords();​

Sie können es fast tun mit:

.link { text-transform: lowercase; }
.link:first-letter { text-transform: uppercase; }

Es gibt Ihnen die Ausgabe:

Small caps
All caps

Konvertieren Sie mit JavaScript mit .toLowerCase()und capitalizeerledigen Sie den Rest.

Interessante Frage!

capitalizewandelt jeden ersten Buchstaben eines Wortes in Großbuchstaben um, die anderen Buchstaben jedoch nicht in Kleinbuchstaben. Nicht einmal die :first-letterPseudoklasse wird es schneiden (weil es für den ersten Buchstaben jedes Elements gilt, nicht für jedes Wort), und ich sehe keine Möglichkeit, Kleinbuchstaben und Großbuchstaben zu kombinieren, um das gewünschte Ergebnis zu erzielen.

Soweit ich sehen kann, ist dies mit CSS in der Tat unmöglich.

@Harmen zeigt in seiner Antwort gut aussehende PHP- und jQuery-Problemumgehungen.

Ich möchte eine reine CSS- Lösung vorschlagen , die nützlicher ist als die vorgestellte Lösung für den ersten Buchstaben , aber auch sehr ähnlich ist.

.link {
  text-transform: lowercase;
display: inline-block;
}

.link::first-line {
  text-transform: capitalize;
}

<div class="link">HELLO WORLD!</div>
<p class="link">HELLO WORLD!</p>
<a href="#" class="link">HELLO WORLD!  ( now working! )</a>

Obwohl dies auf die erste Zeile beschränkt ist, kann es für mehr Anwendungsfälle als die Erstbuchstabenlösung nützlich sein, da die Großschreibung auf die gesamte Zeile und nicht nur auf das erste Wort angewendet wird. (alle Wörter in der ersten Zeile) Im speziellen Fall des OP hätte dies das Problem lösen können.

Anmerkungen: Wie in den Lösungskommentaren des ersten Buchstabens erwähnt , ist die Reihenfolge der CSS-Regeln wichtig! Beachten Sie auch, dass ich das <a>Tag für ein <div>Tag geändert habe, da das Pseudoelement aus irgendeinem Grund ::first-linenicht nativ mit <a>Tags funktioniert, aber entweder oder in Ordnung ist. BEARBEITEN: Das Element funktioniert, wenn es der Klasse hinzugefügt wird . Vielen Dank an Dave Land , der das entdeckt hat!<div><p><a>display: inline-block;.link

Neuer Hinweis: Wenn der Text umbrochen wird, verliert er die Groß- und Kleinschreibung, da er sich jetzt tatsächlich in der zweiten Zeile befindet (die erste Zeile ist noch in Ordnung).

JavaScript:

var links = document.getElementsByClassName("link");
for (var i = 0; i < links.length; i++) {
  links[i].innerHTML = links[i].innerHTML.toLowerCase();
}

CSS:

.link { text-transform: capitalize; }

Was Khan "getan hat" (was sauberer ist und für mich funktioniert hat), steht in den Kommentaren des als Antwort gekennzeichneten Beitrags.

captializebewirkt nur den ersten Buchstaben des Wortes. http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

Kann für Java und JSTL nützlich sein.

1. Variable mit lokalisierter Nachricht initialisieren.
2. Danach ist es möglich, es in der Funktion jstl toLowerCase zu verwenden.
3. Mit CSS transformieren.

In JSP

1.

<fmt:message key="some.key" var="item"/>

2.

<div class="content">
  <a href="#">${fn:toLowerCase(item)}</a>
</div>

In CSS

3.

.content {
  text-transform:capitalize;
}

Sie können es mit CSS-Anfangsbuchstaben tun! zB wollte ich es für das Menü:

a {display:inline-block; text-transorm:uppercase;}
a::first-letter {font-size:50px;}

Es läuft nur mit Blockelementen - daher der Inline-Block!

Wenn die Daten wie in meinem Fall aus einer Datenbank stammen, können Sie sie senken, bevor Sie sie an eine Auswahlliste / Dropdown-Liste senden. Schade, dass Sie das in CSS nicht können.

Nachdem ich viel recherchiert hatte, fand ich jquery function / expression, um Text im ersten Buchstaben nur in Großbuchstaben zu ändern. Ich ändere diesen Code entsprechend, damit er für Eingabefelder verwendet werden kann. Wenn Sie etwas in das Eingabefeld schreiben und dann zu einem anderen Feld oder Element wechseln, ändert sich der Text dieses Felds nur mit Groß- und Kleinschreibung. Unabhängig davon, ob der Benutzer Text in vollständiger Groß- oder Kleinschreibung eingibt:

Folgen Sie diesem Code:

Schritt 1: Rufen Sie die jquery-Bibliothek im HTML-Kopf auf:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Schritt 2: Schreiben Sie Code, um den Text der Eingabefelder zu ändern:

<script>
$(document).ready(function(){
$("#edit-submitted-first-name,#edit-submitted-last-name,#edit-submitted-company-name, #edit-submitted-city").focusout(function(){
var str=$(this).val();
str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
    return letter.toUpperCase();
});
$(this).val(str);
 });});

 </script>

Schritt 3: Erstellen Sie HTML-Eingabefelder mit denselben IDs, die Sie im JQuery-Code verwenden, wie:

<input type="text" id="edit-submitted-first-name" name="field name">

Die ID dieses Eingabefelds lautet: edit-submit-first-name (Verwendung in jquery-Code in Schritt 2)

** Ergebnis: Stellen Sie sicher, dass sich der Text ändert, nachdem Sie Ihren Fokus von diesem Eingabefeld auf ein anderes Element verschoben haben. Weil wir hier Focus Out Event of JQuery verwenden. Das Ergebnis sollte folgendermaßen aussehen: Benutzertyp: "Danke", es ändert sich mit "Danke". ** **.

Viel Glück

Die PHP-Lösung im Backend:

$string = `UPPERCASE`
$lowercase = strtolower($string);
echo ucwords($lowercase);

Ich weiß, dass dies eine späte Antwort ist, aber wenn Sie die Leistung verschiedener Lösungen vergleichen möchten, habe ich einen von mir erstellten jsPerf.

Regex-Lösungen sind mit Sicherheit die schnellsten.

Hier ist der jsPerf: https://jsperf.com/capitalize-jwaz

Es gibt 2 Regex-Lösungen.

Der erste verwendet /\b[a-z]/g. Die Wortgrenze setzt Wörter wie die Nichtoffenlegung in die Geheimhaltung ein.

Wenn Sie nur Buchstaben groß schreiben möchten, denen ein Leerzeichen vorangestellt ist, verwenden Sie den zweiten regulären Ausdruck

/(^[a-z]|\s[a-z])/g

wenn Sie jQuery verwenden; Dies ist eine Möglichkeit, dies zu tun:

$('.link').each(function() {
    $(this).css('text-transform','capitalize').text($(this).text().toLowerCase());
});

Hier ist eine leichter zu lesende Version, die dasselbe tut:

//Iterate all the elements in jQuery object
$('.link').each(function() {

    //get text from element and make it lower-case
    var string = $(this).text().toLowerCase();

    //set element text to the new string that is lower-case
    $(this).text(string);

    //set the css to capitalize
    $(this).css('text-transform','capitalize');
});

Demo

alles falsch es existiert -> Schriftvariante: Kapitälchen;

Texttransformation: groß schreiben; nur die erste Buchstabenkappe