Введите половину слова, предложения и т. Д. - PullRequest
Новая
       20

Введите половину слова, предложения и т. Д.

4 голосов
/ 04 марта 2011

Я хотел бы показать заголовок с тремя первыми символами разного цвета.

Я знаю, что это можно сделать с помощью <h2><span>The</span> awsome title</h2>, но мне было интересно, есть ли какое-то свойство "nth-child", которое можно применить к символам внутри элемента.

Я бы хотел не разбивать текст, вставляя другие элементы (и т. Д.)

(относительно) кроссбраузерное решение приветствуется.

Ответы [ 4 ]

6 голосов
/ 04 марта 2011

Нет более чистого пути, чем у вас уже есть. 

<h2><span>The</span> awesome title</h2>

С помощью CSS: 

h2 {
    color: red
}
h2 span {
    color: blue
}

Есть :first-letter и :first-line, но не :first-word.

Я предполагаю, что причина этого в том, что трудно точно определить, каким должно быть «слово».

Единственный способ сделатьбез изменения разметки использовать JavaScript, чтобы заключить первое слово в <span> (и оформить его таким же образом), но я бы порекомендовал, чтобы, если остальная часть вашего сайта уже в значительной степени , опиралась наJavaScript для работы.

4 голосов
/ 04 марта 2011

Да, JavaScript - единственный способ, которым я могу думать (как все уже сказали!). Демо здесь . 

$(function() {
    $('h2').each(function(){
        $(this).html( $(this).text().replace(/(^\w{3})/,'<span>$1</span>'));
    });
});
2 голосов
/ 04 марта 2011

К сожалению, нет способа сделать это с помощью таблиц стилей.CSS3 предоставляет нам first-letter и first-line, но не first-word, и, конечно, не first-n-letters.

См. Также ответы на этот вопрос для получения дополнительной информации: CSS, чтобы увеличить размер первогоword

JQuery реализует селектор first-word, поэтому, если вы готовы использовать опцию Javascript, вы можете сделать это.

Хех.Кажется, что JQuery на самом деле не реализует его в конце концов.Должно быть, я использовал плагин, когда увидел его.

Но вот ссылка на решение Javascript, которое может помочь: http://www.dynamicsitesolutions.com/javascript/first-word-selector/

2 голосов
/ 04 марта 2011

Это невозможно с текущими операторами CSS, о которых вы говорите nth-whatever,

Однако это можно сделать с помощью JavaScript ... если, конечно, вы хотите пойти по этому пути, лучше всегоспособ сделать это был бы с <span> тегами, так как тогда у вас не будет проблем с людьми, которые отключили JS.

Это полностью ваше дело, но если бы я был на вашем месте, я бы просто набрали использовать JS, это называется прогрессивным расширением и ненавязчивым JS, пока контент не разрушен, если пользователь отключает JS, это приемлемо, см. здесь:

http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/

...