如何设计元素的最后一个单词的样式？

Question

给定一个动态加载的标题（使用 PHP/WordPress），是否有一种纯 CSS 方法来设置最终单词的样式？例如：

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

如果使用 CSS不可行

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

，那么分解

标记的内容是否是建议的方法？

Answer 1

AFAIK CSS 中没有 :last-word 伪类（尽管这很酷）。您可以使用 JavaScript 来完成类似的事情，但如果您有权访问

服务器端，我会使用 PHP 来完成。它将成为源代码的一部分，并且可能更容易。

一个简单的算法是使用 strrpos() 并使用 substr() 将其重新组合在一起，包裹在 <代码><跨度>。

Answer 2

我想一个非常粗略的方法是创建一种处理所有单词的方法并将其放入 PHP array 中。然后 echo 所有值，如果是最后一个值，则将 放在前面，将 放在前面。 之后。

例如：

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

所以基本上这段代码的作用是计算数组中有多少个对象，并检查显示的对象是否是最后一个。如果是，它就会在上面贴上正确的 ID。

我刚刚快速输入了这段代码，所以可能会有一些错误。

库尔顿

Answer 3

是否有纯 CSS 样式方法
最后一句话

原则上没有这样的方法。 CSS 无法修改 DOM。

获取 dom 元素的文本，使用您自己的“单词”标准找到最后一个单词，将其包装到 span 中并根据结果设置innerHTML。

Answer 4

抱歉，对一篇古老的帖子进行了跟进，这是我在谷歌搜索“使用 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;
}