Блог

Главная - Вопросы по программированию - Как может быть оформлено последнее слово элемента?

Как может быть оформлено последнее слово элемента?

#css #wordpress

#css #wordpress

Вопрос:

Учитывая динамически загружаемый заголовок (с использованием PHP / WordPress), существует ли чистый CSS-метод оформления последнего слова? Например:

 <h1 class='featured'> This is my page title</h1>

Становится

 <h1 class='featured'> This is my page <span id="finalWord">title</span></h1>

Если использование CSS нецелесообразно, является ли расширение содержимого <h1> тега предлагаемым способом сделать это?

Комментарии:

1. при генерации на стороне сервера будет легко узнать последнее слово и перенести его..

2. @Kobe: безусловно, только я не уверен, что это обычно считается «наилучшей практикой», и также хотел бы узнать об альтернативах.

Ответ №1:

AFAIK, в CSS нет :last-word псевдокласса (хотя это было бы круто). Вы могли бы использовать JavaScript для чего-то подобного, но если у вас есть доступ к <h1> стороне сервера, я бы сделал это с помощью PHP. Это будет частью исходного кода и, вероятно, проще.

Простым алгоритмом было бы найти последний пробел в строке с помощью strrpos() и использовать substr(), чтобы собрать его обратно, завернув в <span> .

Ответ №2:

Я думаю, действительно грубым способом было бы создать способ для всех слов и поместить его в PHP array . Затем echo все значения, и если оно последнее, то ставьте <span id="finalWord"> перед и </span> после.

ПРИМЕР:

Шаг 1: Создайте массив

 $your_text  = "Your text goes here";
$pieces = explode(" ", $your_text);

Теперь у вас есть все ваши данные в виде массива. Каждое слово находится в своем объекте.

 echo "<h1 class='featured'>";

$the_count = count($pieces);

foreach ($your_text as $i => $value) {
    $i = $i   1;
    if ($i == $the_count) { echo "<span id='finalWord'>"; }
    echo $value;
    if ($i == $the_count) { echo "</span>"; }
}

echo "</h1>";

Итак, в основном, что делает этот код, это подсчитывает, сколько объектов в вашем массиве, и проверяет, является ли отображаемый объект последним. Если это так, он присвоит ему правильный идентификатор.

Я только что очень быстро набрал этот код, поэтому могут быть некоторые ошибки.

Коултон

Комментарии:

1. strrpos и substr_replace будут намного быстрее. Или даже preg_replace!

Ответ №3:

существует ли чистый CSS-метод оформления последнего слова

Такого метода в принципе нет. CSS не может изменять DOM.

Возьмите текст элемента dom, найдите последнее слово, используя ваши собственные критерии для «слова», оберните его в span и задайте innerHTML по результату.

Комментарии:

1. Тогда не псевдокласс, а псевдоэлемент. Но в любом случае ничего подобного. Причина проста: не существует общей концепции такой сущности, как ‘word’.

2. Спасибо за информацию о CSS, я смутно надеялся, что будет псевдокласс типа:last-child, о котором я не слышал ^_^;;

3. извините за это, говоря, что word изначально был из brain shuffle

Ответ №4:

Извините за продолжение древнего поста, это тот, который появился в моих поисковых системах Google для «обернуть последнее слово в строку с тегом span с помощью php», поэтому я решил, что именно сюда я бы поместил решение, которое я придумал.

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

 function wrap_last($string, $wrap_start = '<span class="font-bold">', $wrap_finish = '</span>') {
    $string_array = explode(' ', $string);
    $count = count($string_array);
    $new_array = array();
    foreach ($string_array as $i => $value) {
        $i = $i   1;
        $array_part = '';
        if ($i == $count) {
             $array_part .= $wrap_start;
         }
         $array_part .= $value;
         if ($i == $count) {
             $array_part .= $wrap_finish;
        }
        $new_array[] = $array_part;
    }
    $new_string = implode(' ', $new_array);
    return $new_string;
}