CSS przekształcanie tekstu z wielkimi literami

Oto mój kod HTML:

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

Oto mój CSS:

.link {text-transform: capitalize;}

Wynik to:

Small Caps & ALL CAPS

i chcę, aby wynik wyglądał następująco:

Small Caps & All Caps

Jakieś pomysły?

Nie ma sposobu, aby to zrobić za pomocą CSS, możesz do tego użyć PHP lub Javascript.

Przykład PHP:

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

Przykład jQuery (teraz jest to wtyczka!):

// 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();​

Możesz to prawie zrobić za pomocą:

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

Otrzymasz wynik:

Small caps
All caps

Konwertuj za pomocą JavaScript za pomocą .toLowerCase()i capitalizezrobi resztę.

Interesujące pytanie!

capitalizeprzekształca każdą pierwszą literę słowa na wielką, ale nie przekształca pozostałych liter na małe. Nawet :first-letterpseudoklasa go nie przerwie (ponieważ dotyczy pierwszej litery każdego elementu, a nie każdego słowa) i nie widzę sposobu na połączenie małych i wielkich liter, aby uzyskać pożądany efekt.

O ile widzę, w przypadku CSS jest to rzeczywiście niemożliwe.

@Harmen w swojej odpowiedzi pokazuje dobrze wyglądające obejścia PHP i jQuery.

Chciałbym zasugerować czyste rozwiązanie CSS , które jest bardziej przydatne niż przedstawione rozwiązanie z pierwszej litery , ale jest również bardzo podobne.

.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>

Chociaż jest to ograniczone do pierwszej linii, może być przydatne w większej liczbie przypadków użycia niż pierwsza litera rozwiązanie , ponieważ stosuje wielkie litery do całej linii, a nie tylko do pierwszego słowa. (wszystkie słowa w pierwszym wierszu) W konkretnym przypadku PO mogło to rozwiązać problem.

Uwagi: Jak wspomniano w pierwszych uwagach do rozwiązania, kolejność reguł CSS jest ważna! Zwróć również uwagę, że zmieniłem <a>tag na <div>tag, ponieważ z jakiegoś powodu pseudoelement ::first-linenie działa z <a>tagami natywnie, ale albo <div>albo <p>są w porządku. EDIT:<a> elementem będzie działać , jeśli display: inline-block;jest dodany do .linkklasy. Dzięki Dave Landowi za to, że to zauważył!

Nowa uwaga: jeśli tekst zawija się , utraci wielkie litery, ponieważ w rzeczywistości znajduje się on teraz w drugiej linii (pierwsza linia jest nadal w porządku).

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; }

To, co Khan „zrobił” (co jest dla mnie czystsze i działało), znajduje się w komentarzach do posta oznaczonego jako odpowiedź.

captializewpływa tylko na pierwszą literę słowa. http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

Może być przydatny dla java i jstl.

1. Zainicjuj zmienną ze zlokalizowaną wiadomością.
2. Następnie można go użyć w funkcji jstl toLowerCase.
3. Przekształć za pomocą CSS.

W JSP

1.

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

2.

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

W CSS

3.

.content {
  text-transform:capitalize;
}

Możesz to zrobić za pomocą pierwszej litery CSS! np. chciałem to do Menu:

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

Działa tylko z elementami blokowymi - dlatego blok inline!

Jeśli dane pochodzą z bazy danych, tak jak w moim przypadku, możesz je obniżyć przed wysłaniem do listy wyboru / listy rozwijanej. Szkoda, że ​​nie możesz tego zrobić w CSS.

Po wielu badaniach odkryłem, że funkcja / wyrażenie jQuery zmienia tekst tylko na pierwszą literę wielką, odpowiednio modyfikuję ten kod, aby działał dla pola wejściowego. Kiedy napiszesz coś w polu wprowadzania, a następnie przejdziesz do innego pola lub elementu, tekst tego pola zmieni się tylko z wielkimi literami. Bez względu na tekst wpisywany przez użytkownika z małymi lub dużymi literami:

Postępuj zgodnie z tym kodem:

Krok 1: Wywołaj bibliotekę jquery w nagłówku html:

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

Step-2: Napisz kod, aby zmienić tekst pól wejściowych:

<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>

Krok 3: Utwórz pola wejściowe HTML z tym samym identyfikatorem, którego używasz w kodzie jQuery, takim jak:

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

Identyfikator tego pola wejściowego to: edit-submit-first-name (Używa go w kodzie jQuery w kroku 2)

** Wynik: upewnij się, że tekst zmieni się po przeniesieniu fokusu z tego pola wejściowego na inny element. Ponieważ używamy tutaj fokusu zdarzenia jquery. Wynik powinien wyglądać następująco: Typ użytkownika: „dziękuję”, zmieni się na „dziękuję”. **

Powodzenia

Rozwiązanie PHP w zapleczu:

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

Wiem, że to późna odpowiedź, ale jeśli chcesz porównać wydajność różnych rozwiązań, mam jsPerf, który stworzyłem.

Rozwiązania Regex są na pewno najszybsze.

Oto jsPerf: https://jsperf.com/capitalize-jwaz

Istnieją 2 rozwiązania regex.

Pierwszy używa /\b[a-z]/g. Granica słów będzie wielkimi słowami, takimi jak nieujawnianie do nieujawniania.

Jeśli chcesz używać tylko wielkich liter, które są poprzedzone spacją, użyj drugiego wyrażenia regularnego

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

jeśli używasz jQuery; oto jeden ze sposobów na zrobienie tego:

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

Oto łatwiejsza do odczytania wersja, która robi to samo:

//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');
});

Próbny

wszystko źle, że istnieje -> odmiana czcionki: kapitaliki;

text-transform: wielkie litery; tylko pierwsza litera