Chuyển đổi văn bản CSS viết hoa trên tất cả các chữ hoa

Đây là HTML của tôi:

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

Đây là CSS của tôi:

.link {text-transform: capitalize;}

Đầu ra là:

Small Caps & ALL CAPS

và tôi muốn đầu ra là:

Small Caps & All Caps

Có ý kiến ​​gì không?

Không có cách nào để làm điều này với CSS, bạn có thể sử dụng PHP hoặc Javascript cho việc này.

Ví dụ về PHP

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

Ví dụ về jQuery (bây giờ là 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();​

Bạn gần như có thể làm điều đó với:

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

Nó sẽ cung cấp cho bạn đầu ra:

Small caps
All caps

Chuyển đổi bằng JavaScript bằng cách sử dụng .toLowerCase()và capitalizesẽ làm phần còn lại.

Câu hỏi thú vị!

capitalizebiến đổi mỗi chữ cái đầu tiên của một từ thành chữ hoa, nhưng nó không biến đổi các chữ cái khác thành chữ thường. Ngay cả lớp :first-lettergiả cũng sẽ cắt nó (vì nó áp dụng cho chữ cái đầu tiên của mỗi thành phần, không phải từng từ) và tôi không thể thấy cách kết hợp chữ thường và viết hoa để có kết quả mong muốn.

Theo như tôi có thể thấy, điều này thực sự không thể thực hiện được với CSS.

@Harmen cho thấy các cách giải quyết PHP và jQuery đẹp mắt trong câu trả lời của anh ấy.

Tôi muốn giới thiệu một giải pháp CSS thuần túy hữu ích hơn giải pháp chữ cái đầu tiên được trình bày nhưng cũng rất giống nhau.

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

Mặc dù điều này được giới hạn ở dòng đầu tiên, nó có thể hữu ích cho các trường hợp sử dụng nhiều hơn giải pháp chữ cái đầu tiên vì nó áp dụng viết hoa cho toàn bộ dòng và không chỉ từ đầu tiên. (tất cả các từ trong dòng đầu tiên) Trong trường hợp cụ thể của OP, điều này có thể đã giải quyết nó.

Lưu ý: Như đã đề cập trong các nhận xét giải pháp chữ cái đầu tiên , thứ tự của các quy tắc CSS rất quan trọng! Cũng lưu ý rằng tôi đã thay đổi <a>thẻ cho một <div>thẻ vì một số lý do, phần tử giả ::first-linekhông hoạt động với <a>các thẻ nguyên bản nhưng <div>hoặc <p>là tốt. EDIT: các <a>yếu tố sẽ làm việc nếu display: inline-block;là bổ sung vào .linklớp. Cảm ơn Dave Land vì đã phát hiện ra điều đó!

Lưu ý mới: nếu văn bản kết thúc tốt đẹp, nó sẽ mất chữ viết hoa vì thực tế nó hiện đang ở dòng thứ hai (dòng đầu tiên vẫn ổn).

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

Những gì Khan "đã kết thúc làm" (sạch hơn và làm việc cho tôi) nằm trong phần bình luận của bài đăng được đánh dấu là câu trả lời.

captializechỉ có tác dụng chữ cái đầu tiên của từ. http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

Có thể hữu ích cho java và jstl.

1. Khởi tạo biến với thông điệp cục bộ.
2. Sau đó, có thể sử dụng nó trong hàm jstl toLowerCase.
3. Chuyển đổi với CSS.

Trong JSP

1.

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

2.

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

Trong CSS

3.

.content {
  text-transform:capitalize;
}

Bạn có thể làm điều đó với chữ cái đầu tiên css! ví dụ tôi muốn nó cho Menu:

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

Nó chỉ chạy với các phần tử khối - do đó là khối nội tuyến!

Nếu dữ liệu đến từ cơ sở dữ liệu, như trong trường hợp của tôi, bạn có thể hạ thấp nó trước khi gửi nó vào danh sách chọn / danh sách thả xuống. Thật xấu hổ khi bạn không thể làm điều đó trong CSS.

Sau khi nghiên cứu rất nhiều, tôi thấy hàm / biểu thức jquery chỉ thay đổi văn bản bằng chữ cái đầu tiên, tôi sửa đổi mã đó cho phù hợp để làm cho nó hoạt động được cho trường đầu vào. Khi bạn sẽ viết một cái gì đó trong trường đầu vào và sau đó chuyển sang phần tử hoặc phần tử khác, văn bản của trường đó sẽ chỉ thay đổi với chữ viết hoa chữ cái đầu tiên. Không có vấn đề văn bản loại người dùng hoàn toàn viết hoa chữ thường hoặc viết hoa:

Thực hiện theo mã này:

Bước 1: Gọi thư viện jquery trong đầu html:

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

Bước 2: Viết mã để thay đổi văn bản của các trường đầu vào:

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

Bước 3: Tạo các trường nhập HTML có cùng id mà bạn sử dụng trong mã jquery như:

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

Id của trường đầu vào này là: edit-submit-First-name (Nó sử dụng mã jquery ở bước 2)

** Kết quả: Đảm bảo văn bản sẽ thay đổi sau khi bạn di chuyển tiêu điểm của mình từ trường đầu vào đó vào một yếu tố khác. Bởi vì chúng tôi sử dụng tập trung ra sự kiện của jquery ở đây. Kết quả sẽ như thế này: Loại người dùng: "cảm ơn" nó sẽ thay đổi với "Cảm ơn". **

May mắn nhất

Giải pháp PHP, trong phần phụ trợ:

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

Tôi biết đây là phản hồi muộn nhưng nếu bạn muốn so sánh hiệu suất của các giải pháp khác nhau, tôi có một jsPerf mà tôi đã tạo.

Các giải pháp Regex là nhanh nhất cho chắc chắn.

Đây là jsPerf: https://jsperf.com/capitalize-jwaz

Có 2 giải pháp regex.

Cái đầu tiên sử dụng/\b[a-z]/g . Ranh giới từ sẽ viết hoa các từ như không tiết lộ thành Không tiết lộ.

Nếu bạn chỉ muốn viết hoa các chữ cái đứng trước một khoảng trắng thì hãy sử dụng biểu thức chính thứ hai

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

nếu bạn đang sử dụng jQuery; đây là một cách để làm điều đó:

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

Đây là một phiên bản dễ đọc hơn để làm điều tương tự:

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

Bản giới thiệu

tất cả đều sai nó tồn tại -> biến thể phông chữ: mũ nhỏ;

chuyển đổi văn bản: viết hoa; chỉ nắp chữ cái đầu tiên