CSS metin dönüştürme tüm büyük harflerle büyük harfle yaz

İşte benim HTML’im:

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

İşte benim CSS'im:

.link {text-transform: capitalize;}

Çıktı:

Small Caps & ALL CAPS

ve çıktının şu olmasını istiyorum:

Small Caps & All Caps

Herhangi bir fikir?

Bunu CSS ile yapmanın bir yolu yoktur, bunun için PHP veya Javascript kullanabilirsiniz.

PHP örneği:

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

jQuery örneği (artık bir eklenti!):

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

Bunu neredeyse şununla yapabilirsiniz:

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

Size şu çıktıyı verecektir:

Small caps
All caps

Kullanarak JavaScript dönüştürme .toLowerCase()ve capitalizegerisini getireceği düşünülmüştü.

İlginç soru!

capitalizedönüşümler bir kelimenin her ilk harfi büyük harfe, ancak yok değil küçük harfe diğer harfleri dönüşümü. :first-letterSözde sınıf bile onu kesmez (çünkü her bir öğenin ilk harfine uygulanır, her kelimeye değil) ve istenen sonucu elde etmek için küçük harfle büyük harfleri birleştirmenin bir yolunu göremiyorum.

Görebildiğim kadarıyla bunun CSS ile yapılması gerçekten imkansız.

@Harmen cevabında güzel görünümlü PHP ve jQuery çözümlerini gösteriyor.

Sunulan ilk harf çözümünden daha kullanışlı, ancak aynı zamanda çok benzer olan saf bir CSS çözümü önermek istiyorum .

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

Bu, ilk satırla sınırlı olsa da, yalnızca ilk kelimeye değil tüm satıra büyük harf uyguladığından , ilk harf çözümünden daha fazla kullanım durumu için yararlı olabilir . (ilk satırdaki tüm kelimeler) OP'nin özel durumunda bu onu çözebilirdi.

Notlar: İlk harf çözüm yorumlarında belirtildiği gibi , CSS kurallarının sırası önemlidir! Ayrıca <a>, bir <div>etiketin etiketini değiştirdiğimi de unutmayın, çünkü bazı nedenlerden dolayı sözde öğe yerel olarak etiketlerle ::first-lineçalışmaz, ancak ya da iyidir. DÜZENLEME: eleman çalışacak eğer eklenen olduğunu sınıfına. Bunu fark ettiği için Dave Land'e teşekkürler !<a><div><p><a>display: inline-block;.link

Yeni Not: eğer metin sarar ikinci satırda aslında çünkü artık o harf kaybedeceksiniz (İlk satır hala ok).

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

Khan'ın "ne yaptığını" (benim için daha temiz ve işe yaradı) yanıt olarak işaretlenen gönderinin yorumlarında yer alıyor.

captializeyalnızca kelimenin ilk harfini etkiler. http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

Java ve jstl için yararlı olabilir.

1. Değişkeni yerelleştirilmiş mesajla başlatın.
2. Bundan sonra jstl toLowerCase fonksiyonunda kullanmak mümkündür.
3. CSS ile dönüştürün.

JSP'de

1.

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

2.

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

CSS'de

3.

.content {
  text-transform:capitalize;
}

Bunu css ilk harfiyle yapabilirsiniz! örneğin Menü için istedim:

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

Yalnızca blok elemanlarıyla çalışır - bu nedenle satır içi blok!

Veriler bir veritabanından geliyorsa, benim durumumda olduğu gibi, bir seçim listesine / açılır listeye göndermeden önce verileri düşürebilirsiniz. Bunu CSS'de yapamaman ne yazık.

Çok fazla araştırma yaptıktan sonra jquery işlevini / ifadesini ilk harfteki metni yalnızca büyük harf olarak değiştirmek için buldum, bu kodu giriş alanı için çalışabilir hale getirmek için buna göre değiştirdim. Giriş alanına bir şey yazıp daha sonra başka bir dosyaya veya öğeye geçtiğinizde, bu alanın metni yalnızca 1. harf büyük olacak şekilde değişecektir. Kullanıcının metni küçük veya büyük harfle tam olarak yazması önemli değil:

Bu kodu izleyin:

Adım-1: html başlığındaki jquery kitaplığını çağırın:

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

Adım-2: Giriş alanlarının metnini değiştirmek için kod yazın:

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

Adım-3: jquery kodunda kullandığınız aynı kimliklere sahip HTML giriş alanları oluşturun, örneğin:

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

Bu giriş alanının kimliği şudur: edit-submit-first-name (2. adımda jquery kodunda kullanılır)

** Sonuç: Odağınızı bu giriş alanından başka bir öğeye taşıdıktan sonra metnin değişeceğinden emin olun. Çünkü burada jquery olayına odaklanıyoruz. Sonuç şöyle olmalıdır: Kullanıcı Türü: "Teşekkürler", "Teşekkür Ederim" ile değişecektir. **

İyi şanslar

Arka uçtaki PHP çözümü:

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

Bunun geç bir yanıt olduğunu biliyorum, ancak çeşitli çözümlerin performansını karşılaştırmak isterseniz, oluşturduğum bir jsPerf var.

Regex çözümleri kesinlikle en hızlısıdır.

İşte jsPerf: https://jsperf.com/capitalize-jwaz

2 normal ifade çözümü vardır.

İlki kullanır /\b[a-z]/g. Kelime sınırı, İfşa Etmeme durumunda ifşa etmeme gibi büyük harflerle yazılacaktır.

Yalnızca önünde boşluk bulunan harfleri büyük harfle yazmak istiyorsanız, ikinci normal ifadeyi kullanın

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

jQuery kullanıyorsanız; bu, bunu yapmanın bir yoludur:

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

İşte aynı şeyi yapan, okunması daha kolay bir versiyon:

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

gösteri

tüm yanlış var -> font-variant: küçük harfli;

metin-dönüşümü: harf; sadece ilk harf