CSS text-transform: großschreibung;kapitalize bei allen Großbuchstaben

Question

Hier ist mein HTML:

kleine Großbuchstaben & 
GROßBUCHSTABEN

Hier ist mein CSS:

.link {text-transform: capitalize;}

Das Ergebnis ist:

Kleine Großbuchstaben & GROßBUCHSTABEN

Und ich möchte das Ergebnis sein:

Kleine Großbuchstaben & Alle Großbuchstaben

Irgendwelche Ideen?

Answer 1

Sie können es fast mit folgendem Code tun:

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

Es wird Ihnen die Ausgabe geben:

Kapitälchen
ALLE GROSSBUCHSTABEN

Answer 2

Es gibt keine Möglichkeit, dies mit CSS zu tun, du könntest PHP oder Javascript dafür verwenden.

PHP Beispiel:

$text = "GROßBUCHSTABEN";
$text = ucwords(strtolower($text)); // Großbuchstaben

jQuery Beispiel (es ist jetzt ein Plugin!):

// Jeden ersten Buchstaben eines Wortes groß schreiben
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();

Answer 3

Mit JavaScript konvertieren, indem .toLowerCase() und capitalize verwendet werden, würde den Rest erledigen.

Answer 4

Interessante Frage!

capitalize wandelt jeden ersten Buchstaben eines Wortes in Großbuchstaben um, aber es wandelt nicht die anderen Buchstaben in Kleinbuchstaben um. Nicht einmal die :first-letter Pseudo-Klasse wird es schaffen (weil sie auf den ersten Buchstaben jedes Elements anwendet, nicht auf jedes Wort), und ich sehe keine Möglichkeit, Kleinbuchstaben und capitalize zu kombinieren, um das gewünschte Ergebnis zu erzielen.

Soweit ich sehen kann, ist dies tatsächlich mit CSS nicht möglich.

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

Answer 5

Ich möchte eine reine CSS-Lösung vorschlagen, die nützlicher ist als die erste Buchstabe-Lösung, die präsentiert wurde, aber auch sehr ähnlich ist.

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

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

HELLO WORLD!
HELLO WORLD!
HELLO WORLD!  ( now working! )

Auch wenn dies auf die erste Zeile beschränkt ist, könnte es für mehr Anwendungsfälle nützlicher sein als die erste Buchstabe-Lösung, da es die Großschreibung auf die ganze Zeile anwendet und nicht nur auf das erste Wort. (alle Wörter in der ersten Zeile) In dem speziellen Fall des OP hätte dies das Problem gelöst.

Hinweis: Wie im Kommentar der ersten Buchstabe-Lösung erwähnt, ist die Reihenfolge der CSS-Regeln wichtig! Beachten Sie auch, dass ich das -Tag in ein

-Tag geändert habe, da das Pseudo-Element ::first-line aus irgendeinem Grund nicht mit -Tags natürlich funktioniert, sondern entweder

oder

sind in Ordnung. EDIT: Das -Element wird funktionieren, wenn display: inline-block; zur .link Klasse hinzugefügt wird. Vielen Dank an Dave Land dafür!

Neuer Hinweis: Wenn der Text umbricht, verliert er die Großschreibung, da er jetzt tatsächlich in der zweiten Zeile ist (die erste Zeile ist immer noch in Ordnung).