แปลงข้อความเป็นตัวพิมพ์ใหญ่ในตัวพิมพ์ใหญ่ทั้งหมด

นี่คือ HTML ของฉัน:

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

นี่คือ CSS ของฉัน:

.link {text-transform: capitalize;}

ผลลัพธ์คือ:

Small Caps & ALL CAPS

และฉันต้องการผลลัพธ์ที่จะเป็น:

Small Caps & All Caps

ความคิดใด ๆ

ไม่มีวิธีในการทำเช่นนี้กับ CSS คุณสามารถใช้ PHP หรือ Javascript สำหรับสิ่งนี้

ตัวอย่าง PHP:

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

ตัวอย่าง jQuery (เป็นปลั๊กอินทันที!):

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

คุณสามารถเกือบจะทำมันด้วย:

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

มันจะให้ผลลัพธ์:

Small caps
All caps

แปลงด้วยการใช้ JavaScript .toLowerCase()และcapitalizeจะทำส่วนที่เหลือ

คำถามที่น่าสนใจ!

capitalizeแปลงตัวอักษรตัวแรกของคำทุกคำเป็นตัวพิมพ์ใหญ่ แต่จะไม่แปลงตัวอักษรอื่นเป็นตัวพิมพ์เล็ก ไม่ใช่แม้กระทั่ง:first-letterคลาสหลอกจะตัดมัน (เพราะมันใช้กับตัวอักษรตัวแรกของแต่ละองค์ประกอบไม่ใช่แต่ละคำ) และฉันไม่เห็นวิธีการรวมตัวพิมพ์เล็กและพิมพ์ใหญ่เพื่อให้ได้ผลลัพธ์ที่ต้องการ

ดังนั้นเท่าที่ฉันเห็นนี่เป็นไปไม่ได้แน่นอนที่จะทำกับ CSS

@Harmen แสดงวิธีแก้ปัญหา PHP และ jQuery ที่ดูดีในคำตอบของเขา

ฉันอยากจะแก้ปัญหาCSS บริสุทธิ์ที่มีประโยชน์มากกว่าตัวอักษรตัวแรกที่นำเสนอ แต่ก็คล้ายกันมาก

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

แม้ว่าสิ่งนี้จะถูก จำกัด อยู่ที่บรรทัดแรกมันอาจจะมีประโยชน์สำหรับกรณีการใช้งานมากกว่าโซลูชันตัวอักษรตัวแรกเนื่องจากมันใช้ตัวพิมพ์ใหญ่กับทั้งบรรทัดและไม่เพียงแค่คำแรก (ทุกคำในบรรทัดแรก) ในกรณีเฉพาะของ OP สิ่งนี้อาจแก้ไขได้

หมายเหตุ:ตามที่กล่าวไว้ในความคิดเห็นเกี่ยวกับการแก้ปัญหาตัวอักษรตัวแรกลำดับของกฎ CSS นั้นมีความสำคัญ! นอกจากนี้ทราบว่าผมเปลี่ยน<a>แท็กสำหรับ<div>แท็กเพราะเหตุผลบางอย่างหลอกองค์ประกอบ::first-lineไม่ได้ทำงานกับ<a>แท็กโดยกำเนิดแต่อย่างใดอย่างหนึ่ง<div>หรือ<p>จะมีการปรับ แก้ไข:<a>องค์ประกอบจะทำงานถ้าdisplay: inline-block;จะถูกเพิ่มใน.linkชั้นเรียน ขอบคุณเดฟแลนด์สำหรับการตรวจจับ!

ใหม่หมายเหตุ:หากข้อความที่ตัดคำจะทำให้การใช้อักษรตัวพิมพ์ใหญ่หลวมเพราะตอนนี้มันเป็นความจริงในบรรทัดที่สอง (บรรทัดแรกยังคงโอเค)

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

สิ่งที่ข่าน "ลงเอยด้วยการทำ" (ซึ่งสะอาดกว่าและเหมาะกับฉัน) ลงในความคิดเห็นของโพสต์ที่ทำเครื่องหมายว่าเป็นคำตอบ

captializeเอฟเฟกต์ตัวอักษรแรกของคำเท่านั้น http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

อาจมีประโยชน์สำหรับ java และ jstl

1. เริ่มต้นตัวแปรด้วยข้อความที่แปลแล้ว
2. หลังจากนั้นก็เป็นไปได้ที่จะใช้มันในฟังก์ชั่น jstl toLowerCase
3. แปลงด้วย CSS

ใน JSP

1

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

2

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

ใน CSS

3

.content {
  text-transform:capitalize;
}

คุณสามารถทำได้ด้วย css ตัวอักษรแรก! เช่นฉันต้องการมันสำหรับเมนู:

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

มันจะทำงานกับองค์ประกอบบล็อกเท่านั้นดังนั้นบล็อกอินไลน์!

หากข้อมูลมาจากฐานข้อมูลเช่นเดียวกับในกรณีของฉันคุณสามารถลดข้อมูลลงก่อนที่จะส่งไปยังรายการที่เลือก / รายการแบบหล่นลง ความอัปยศที่คุณไม่สามารถทำได้ใน CSS

หลังจากค้นคว้ามากฉันพบว่าฟังก์ชั่น jquery / การแสดงออกเพื่อเปลี่ยนข้อความในตัวอักษรตัวแรกในตัวพิมพ์ใหญ่เท่านั้นฉันแก้ไขรหัสนั้นตามเพื่อให้สามารถใช้งานได้สำหรับการป้อนข้อมูล เมื่อคุณจะเขียนอะไรบางอย่างในฟิลด์อินพุตจากนั้นย้ายไปที่ไฟล์หรือองค์ประกอบอื่นข้อความของฟิลด์นั้นจะเปลี่ยนเป็นอักษรตัวพิมพ์ใหญ่ตัวที่หนึ่งเท่านั้น ไม่ว่าผู้ใช้จะพิมพ์ข้อความเป็นตัวพิมพ์ใหญ่หรือตัวพิมพ์เล็กทั้งหมด:

ทำตามรหัสนี้:

ขั้นตอนที่ 1: โทร jquery library ใน html head:

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

ขั้นตอนที่ 2: เขียนโค้ดเพื่อเปลี่ยนข้อความของฟิลด์อินพุต:

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

ขั้นตอนที่ 3: สร้างช่องป้อน HTML ด้วยรหัสเดียวกันกับที่คุณใช้ในรหัส jquery เช่น:

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

id ของฟิลด์อินพุตนี้คือ: edit-submitted-first-name (โดยใช้ในโค้ด jquery ในขั้นตอนที่ 2)

** ผลลัพธ์: ตรวจสอบให้แน่ใจว่าข้อความจะเปลี่ยนหลังจากคุณย้ายโฟกัสของคุณจากฟิลด์อินพุตนั้นไปยังองค์ประกอบอื่น เพราะเราใช้การเน้นเหตุการณ์ jquery ที่นี่ ผลลัพธ์ควรเป็นดังนี้: ประเภทผู้ใช้: "ขอบคุณ" มันจะเปลี่ยนเป็น "ขอบคุณ" **

ขอให้โชคดี

โซลูชัน PHP ในแบ็กเอนด์:

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

ฉันรู้ว่านี่เป็นการตอบสนองที่ช้า แต่ถ้าคุณต้องการเปรียบเทียบประสิทธิภาพของโซลูชันต่างๆฉันมี jsPerf ที่ฉันสร้างขึ้น

โซลูชันของ Regex นั้นเร็วที่สุดอย่างแน่นอน

นี่คือ jsPerf: https://jsperf.com/capitalize-jwaz

มี 2 ​​โซลูชัน regex

/\b[a-z]/gคนแรกที่ใช้ ขอบเขตของคำจะใส่คำเช่นไม่เปิดเผยต่อการไม่เปิดเผย

หากคุณต้องการใช้อักษรตัวพิมพ์ใหญ่ที่นำหน้าด้วยช่องว่างให้ใช้ regex ตัวที่สอง

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

หากคุณใช้ jQuery นี่เป็นวิธีหนึ่งในการทำ:

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

นี่คือเวอร์ชันที่อ่านง่ายกว่าที่ทำสิ่งเดียวกัน:

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

การสาธิต

ผิดทั้งหมดมันมีอยู่ -> font-variant: small-caps;

ข้อความเปลี่ยน: ประโยชน์; แค่หมวกตัวอักษรตัวแรก