Существует ли кросс-браузерный способ css для декорирования только последнего слова в блоке span? - PullRequest
Новая
       3

Существует ли кросс-браузерный способ css для декорирования только последнего слова в блоке span?

0 голосов
/ 20 июля 2010

Мне нужно показать список пользователей, который должен выглядеть следующим образом:

Елена Ожоги
Эдвард Fairfax Рочестер
Берта Антуанетта Мейсон
Адель Varens

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

Ответы [ 6 ]

8 голосов
/ 20 июля 2010

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

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

3 голосов
/ 20 июля 2010

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

1 голос
/ 20 июля 2010

без чистого 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>

рабочая демонстрация .

edit: , если вы не хотите использовать дополнительный тег span, просто измените 

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

до 

var spanLastName = $('<strong/>');
1 голос
/ 20 июля 2010

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

0 голосов
/ 20 июля 2010

Я не знаю, почему вы можете не захотеть иметь дополнительный тег вокруг фамилии (как предлагали другие ответы и комментарии), но если вы ищете просто минималистскую наценку, это работает (нет 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 или ниже.

0 голосов
/ 20 июля 2010

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

Елена Ожоги
Эдвард Фэйрфакс Рочестер
Берта Антуанетта Мейсон
Adèle Varens

...