Transformasi teks CSS memanfaatkan semua huruf besar

Inilah HTML saya:

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

Inilah CSS saya:

.link {text-transform: capitalize;}

Outputnya adalah:

Small Caps & ALL CAPS

dan saya ingin hasilnya:

Small Caps & All Caps

Ada ide?

Tidak ada cara untuk melakukan ini dengan CSS, Anda bisa menggunakan PHP atau Javascript untuk ini.

Contoh PHP:

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

Contoh jQuery (sekarang 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();​

Anda hampir dapat melakukannya dengan:

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

Ini akan memberi Anda output:

Small caps
All caps

Konversi dengan JavaScript menggunakan .toLowerCase()dan capitalizeakan melakukan sisanya.

Pertanyaan menarik!

capitalizemengubah setiap huruf pertama dari kata menjadi huruf besar, tetapi tidak mengubah huruf lainnya menjadi huruf kecil. Bahkan kelas :first-letterpseudo tidak akan memotongnya (karena itu berlaku untuk huruf pertama dari setiap elemen, bukan setiap kata), dan saya tidak bisa melihat cara menggabungkan huruf kecil dan huruf besar untuk mendapatkan hasil yang diinginkan.

Jadi sejauh yang saya bisa lihat, ini memang tidak mungkin dilakukan dengan CSS.

@Harmen menunjukkan solusi PHP dan jQuery yang tampan dalam jawabannya.

Saya ingin menyarankan solusi CSS murni yang lebih berguna daripada solusi huruf pertama yang disajikan tetapi juga sangat mirip.

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

Meskipun ini terbatas pada baris pertama, ini mungkin berguna untuk lebih banyak kasus penggunaan daripada solusi huruf pertama karena ini menggunakan kapitalisasi untuk seluruh baris dan tidak hanya kata pertama. (semua kata di baris pertama) Dalam kasus khusus OP ini bisa menyelesaikannya.

Catatan: Seperti disebutkan dalam komentar solusi huruf pertama , urutan aturan CSS penting! Perhatikan juga bahwa saya mengubah <a>tag untuk sebuah <div>tag karena untuk beberapa alasan elemen pseudo ::first-linetidak bekerja dengan <a>tag secara asli tetapi baik <div>atau <p>baik-baik saja. EDIT: yang <a>elemen akan bekerja jika display: inline-block;adalah ditambahkan ke .linkkelas. Terima kasih kepada Dave Land karena mengetahui hal itu!

Catatan Baru: jika teks dibungkus, maka huruf kapital akan terlepas karena sekarang berada di baris kedua (baris pertama masih 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; }

Apa yang Khan "akhirnya lakukan" (yang lebih bersih dan bekerja untuk saya) ada di komentar posting yang ditandai sebagai jawabannya.

captializehanya mempengaruhi huruf pertama dari kata tersebut. http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

Semoga bermanfaat untuk java dan jstl.

1. Inisialisasi variabel dengan pesan lokal.
2. Setelah itu dimungkinkan untuk menggunakannya dalam fungsi jstl toLowerCase.
3. Transformasikan dengan CSS.

Di JSP

1.

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

2.

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

Dalam CSS

3.

.content {
  text-transform:capitalize;
}

Anda dapat melakukannya dengan huruf pertama css! misalnya saya menginginkannya untuk Menu:

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

Ini hanya berjalan dengan elemen blok - karena itu blok inline!

Jika data berasal dari database, seperti dalam kasus saya, Anda dapat menurunkannya sebelum mengirimnya ke daftar pilih / daftar turun bawah. Sayang Anda tidak dapat melakukannya di CSS.

Setelah meneliti banyak, saya menemukan fungsi / ekspresi jquery untuk mengubah teks dalam huruf pertama hanya dalam huruf besar, saya memodifikasi kode tersebut agar dapat dikerjakan untuk bidang input. Saat Anda akan menulis sesuatu di bidang input dan kemudian pindah ke elemen atau elemen lain yang diajukan, teks bidang itu akan berubah hanya dengan huruf kapital huruf pertama. Teks apa pun yang diketik pengguna dalam kapitalisasi huruf besar atau kecil:

Ikuti kode ini:

Langkah-1: Panggil perpustakaan jquery di kepala html:

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

Langkah-2: Tulis kode untuk mengubah teks bidang input:

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

Langkah-3: Buat bidang input HTML dengan id yang sama yang Anda gunakan dalam kode jquery seperti:

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

Id bidang input ini adalah: edit-submit-first-name (Menggunakan kode jquery pada langkah-2)

** Hasil: Pastikan teks akan berubah setelah Anda memindahkan fokus Anda dari bidang input di elemen lain. Karena kami menggunakan fokus acara jquery di sini. Hasilnya harus seperti ini: Jenis Pengguna: "terima kasih" itu akan berubah dengan "Terima Kasih". **

Semoga berhasil

Solusi PHP, di backend:

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

Saya tahu ini adalah respons yang terlambat tetapi jika Anda ingin membandingkan kinerja berbagai solusi, saya punya jsPerf yang saya buat.

Solusi Regex pasti yang tercepat.

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

Ada 2 solusi regex.

Yang pertama menggunakan /\b[a-z]/g. Batas kata akan menggunakan kata-kata seperti non-disclosure untuk Non-Disclosure.

Jika Anda hanya ingin menggunakan huruf besar yang diawali dengan spasi, gunakan regex kedua

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

jika Anda menggunakan jQuery; ini adalah salah satu cara untuk melakukannya:

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

Ini adalah versi yang lebih mudah dibaca untuk melakukan hal yang sama:

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

semua salah memang ada -> font-varian: huruf kecil;

text-transform: capitalize; hanya tutup huruf pertama