How can the last word of an element be styled?

2 Views

Given a dynamically loaded heading (using PHP/WordPress) is there a pure CSS method of styling the final word? For instance: 

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

Becomes

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

If using CSS is not viable, is exploding the content of the <h1> tag the suggested way to do this?

Post Views: 2

Related posts

Leave a Reply

4 comments

  1. AFAIK there is not a :last-word pseudo class in CSS (although that would be cool). You could use JavaScript for something like this, but if you have access to the <h1> server-side I’d do it with PHP. It’s going to be part of the source code and probably easier.

    A simple algorithm would be to find the last space in the string with strrpos() and use substr() to piece it back together wrapped in <span>.

  2. I guess a really crude way would be to create a way to all the words and put it in a PHP array. Then echo all the values, and if it’s the last one then put the <span id="finalWord"> before and the </span> after.

    EX:

    Step 1: Create the array

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

    Now you have all your data in a array. Each word is in it’s object.

    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>";

    So basically what this code does is count how many objects are in your array and will check if the object being displayed is the last one. If it is, it will put the correct ID on it.

    I just typed this code out real quick, so there could be some errors.

    Coulton

  3. is there a pure CSS method of styling
    the final word

    No such method in principle. CSS cannot modify the DOM.

    Take text of dom element, find last word using your own criteria for the “word”, wrap it into span and set innerHTML by the result.

  4. Sorry for the follow up on an ancient post, this is the one that came up in my google searches for “wrap the last word in a string with a span tag using php” so I figured this is where I would put the solution I came up with.

    Using the above as a starting point, I created this function to accomplish what I needed:

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