Есть ли кросс-браузерный способ CSS, чтобы украсить только последнее слово в блоке диапазона?

Мне нужно, чтобы показать список пользователя, который должен выглядеть как в примере ниже:Есть ли кросс-браузерный способ CSS, чтобы украсить только последнее слово в блоке диапазона?

Хелен Burns
Эдвард Fairfax Rochester
Берта Antoinetta Mason
Adele Varens

Есть ли ва y для достижения этого без использования javascript? Каждая строка должна иметь один интервал, т. Е. <span>Helen</span><span>Burns</span> неприемлем.

источник

2010-07-20 Roman

Как насчет того, что JS меняет структуру HTML (обматывает последние слова ) во время выполнения? –

Будет Helen Burns приемлемо? В противном случае нет: селектор CSS последнего слова. – jasongetsdown

Вы должны быть более конкретными, я думаю. Это можно легко сделать, выполнив Helen Burns, но что-то подсказывает, что вы пытаетесь сделать что-то еще. – davidcelis

Нет, нет. Вам нужно будет использовать некоторую форму скриптов, чтобы выполнить это, если вы не хотите, чтобы ваши последние имена были в их собственных тегах.

В браузере каждая строка является элементом, а сами слова не имеют отдельного значения в отношении CSS. Вы должны поместить слова в разные теги, чтобы делать то, что хотите.

источник

2010-07-20 13:25:51

Браузер не умеет автоматически определять, какая часть имени является фамилией, поэтому вам нужно добавить дополнительную разметку для достижения желаемого.

источник

2010-07-20 13:25:56 jao

Automagically - мое любимое новое слово дня! :-) –

Существует нет решения для общего используемого браузера для ознакомления с использованием только CSS. Вы должны использовать javascript или HTML + CSS, как вы уже сделали.

источник

2010-07-20 13:26:25

Я не думаю, что это возможно с помощью CSS, потому что ваш пример не показывает порядок:

Helen Burns
Эдвард Фэйрфакс Рочестер
Берта Antoinetta Мейсон
Adèle Varens

источник

2010-07-20 13:26:57 Sarfraz

без чистых css это невозможно (так как вы не знаете муравей разделение в разметке) ...

<span>Monty Burns</span><br /> 
<span>Bart Simpson</span> 
<script type="text/javascript"> 
$(document).ready(function() { 
    var spans = $('span'); 
    spans.each(function(index, element) { 
     var span = $(element); 
     var spanText = span.text(); 
     var spanTextArray = spanText.split(' '); 
     var spanTextArrayLength = spanTextArray.length; 
     var lastName = spanTextArray[spanTextArrayLength -1]; 
     spanTextArray.pop(); 
     var firstName = spanTextArray.join(' '); 
     span.text(firstName); 
     var spanLastName = $('<span/>'); 
     spanLastName.css('font-weight', 'bold'); 
     spanLastName.css('margin-left', '5px'); 
     spanLastName.appendTo(span); 
     spanLastName.text(lastName); 
    }); 
}); 
</script>

working demo.

редактировать:, если вы не хотите дополнительных span -tag в там, просто изменить

var spanLastName = $('<span/>'); 
spanLastName.css('font-weight', 'bold');

var spanLastName = $('<strong/>');

источник

2010-07-20 13:30:48

Вы должны включить свой фрагмент кода в строку, вместо ссылки на http://jsfiddle.net/ - это облегчит для других поиск вашего кода здесь. Не то, чтобы JsFiddle не был полезен (это так), но ваш ответ достаточно мал, чтобы иметь смысл включить его здесь. –

Я не знаю, почему вы могли бы желать, чтобы не иметь дополнительный тег, окружающий фамилию (как предлагали другие ответы и комментарии), но если вы ищете просто минималистскую надбавку, это работает (не используется span):

Html:

<body> 
    First Middle <strong>Last</strong> 
    First Middle <strong>Last</strong> 
    First Middle <strong>Last</strong> 
</body>

Css:

strong:after {content:' '; display: block;}

Что создает «строки» с нужным стилем без ничего больше, чем один тег (который может быть span, а не strong, если желательно).

Редактировать: Конечно, это не будет работать для IE7 или ниже.

источник

2010-07-20 14:15:22 ScottS

Есть ли кросс-браузерный способ CSS, чтобы украсить только последнее слово в блоке диапазона?

ответ

Смежные вопросы