2010-12-14 39 views
6

Có một bút giả CSS cho chữ hoa/chữ/từ không? Tôi muốn tất cả các thủ đô của tôi là một pt nhỏ hơn và tất cả các nhân vật khác có cùng kích thước. Vốn không nhất thiết phải là ký tự đầu tiên của câu (hoặc từ) hay cách khác.bộ chọn giả cho các ký tự/từ viết hoa?

Hoặc có thể có một cách khác để tìm các ký tự này trong CSS? Với một thủ thuật? Tôi thích thủ đoạn.

Trả lời

3

Vâng, có bộ chọn first-letter được hỗ trợ kém, nhưng đó không phải là những gì bạn muốn.

Tất nhiên, bạn cũng có thể phân tích cú pháp HTML của mình bằng PHP, gói tất cả các thẻ trong các thẻ <span class="capital"></span>, nhưng đó là một hack.

Sau đó, tất nhiên bạn luôn có thể rút chú thỏ jQuery kỳ diệu và thay đổi DOM của bạn tại tải tài liệu để bao gồm các nhịp. Đó cũng là một hack. Bạn có thích hack?

Hãy xem ai khác có thể sử dụng mẹo ma thuật :-)

+0

Tôi thích hack, nhưng không phải jQuery và không Javascript để cố định kiểu thứ. Chuẩn bị trong PHP là một ý tưởng tốt. Điều tốt tôi đang sử dụng PHP :) – Rudie

1

Tôi không nghĩ điều này là có thể.

Tốt hơn để chỉ quấn các chữ in hoa với một khoảng với một lớp và sử dụng nó để tạo kiểu cho chúng.

1

Điều này không thể sử dụng CSS.

Bạn có thể sử dụng Javascript để kiểm tra tất cả các ký tự trong văn bản của bạn để viết hoa (ví dụ: bằng cách sử dụng if (yourtext == yourtext.toUpperCase())) và sau đó quấn <span> xung quanh chúng chứa CSS của bạn để tạo kiểu.

Hoặc một cái gì đó xung quanh những dòng này: (? Có lẽ ai đó có thời gian để tạo ra một jsfiddle với điều này)

function wrapCaps() { 
    var text = document.getElementById("my_text").value; 
    for(i=0; i < text.length; i++) { 
     if(text[i].charCodeAt(text[i]) >= 65 && text[i].charCodeAt(text[i]) <= 90) 
     wrapNode(text[i], 'span'); 
    } 
} 

Tôi không thử nó ra, bạn có thể cần phải sử dụng replaceNode hay một cái gì đó như thế. Phương thức charCodeAt chỉ tìm kiếm các chữ in hoa, xin lưu ý rằng không có ký tự unicode nào giống như các chữ cái hoa đặc biệt của Hy Lạp sẽ được bao gồm.
Bây giờ bạn chỉ cần span style của bạn với một cái gì đó như:

#my_text span { 
    font-size: 10px; 
} 
+0

Tôi không sử dụng javascript để sửa lỗi bố cục/kiểu. Tôi thích thuần khiết. Tốt đẹp của bạn để làm việc ra các chức năng mặc dù! – Rudie

Các vấn đề liên quan