2010-12-14 3 views
6

Есть ли псевдоселектор CSS для прописных букв/букв/слов? Я хочу, чтобы все мои капиталы были меньше, а все остальные персонажи одинакового размера. Капитал не обязательно является первым персонажем предложения (или слова) или наоборот.псевдо-селектор для прописных букв/слов?

Возможно, есть еще один способ найти эти символы в CSS? С трюком? Мне нравятся трюки.

ответ

3

Ну, есть бедный first-letter селектор, но это не то, что вы хотите.

Вы, конечно же, можете предварительно проанализировать свой HTML на PHP, обернув все кепки в тегах <span class="capital"></span>, но это взломать.

Тогда, конечно, вы всегда можете вытащить волшебного кролика jQuery и изменить свой DOM при загрузке документа, чтобы включить пролеты. Это тоже хак. Вам нравятся хаки?

Давайте посмотрим, кто еще получается с волшебным трюком :-)

+0

Мне нравится хаки, но не JQuery и не Javascript, чтобы исправить вещи в стиле. Подготовка к PHP - хорошая идея. Хорошо, что я использую PHP :) – Rudie

1

Я не думаю, что это возможно.

Лучше просто обернуть заглавные буквы пролетом с классом и использовать их для их стилизации.

1

Это не возможно с помощью CSS.

Вы можете использовать Javascript для проверки всех символов в тексте для прописных букв (например, с помощью if (yourtext == yourtext.toUpperCase())), а затем оберните вокруг них <span>, содержащий ваш CSS, чтобы их стиль.

Или что-то вокруг этих линий: (? Может быть, кто-то есть время, чтобы создать jsfiddle с этим)

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

Я не пробовал это, возможно, придется использовать replaceNode или что-то подобное. Метод charCodeAt просто ищет заглавные буквы, обратите внимание, что никакие символы Юникода, такие как специальные греческие заглавные буквы, не будут включены.
Теперь вам нужно только укладывать срок что-то вроде:

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

Я не использую javascript для исправлений макета/стиля. Мне нравится чисто. Приятно, что вы все-таки разработали эту функцию! – Rudie