如何设计元素的最后一个单词?

时间:2011-05-01 02:45:36

标签: 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>标记的内容是建议的方法吗?

4 个答案:

答案 0 :(得分:3)

AFAIK CSS中没有:last-word伪类(虽然这很酷)。你可以使用JavaScript来做这样的事情,但如果你有权访问<h1>服务器端,我会用PHP来做。它将成为源代码的一部分,可能更容易。

一个简单的算法是使用strrpos()找到字符串中的最后一个空格,并使用substr()将其重新组合在<span>中。

答案 1 :(得分:1)

  

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

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

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

答案 2 :(得分:1)

我想一个非常粗糙的方法是创建一个方法来处理所有单词并将其放在PHP array中。然后echo所有值,如果是最后一个值,则将<span id="finalWord">放在之前,然后放置</span>

EX:

第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。

我只是快速输入此代码,因此可能会出现一些错误。

库尔顿

答案 3 :(得分:0)

很抱歉跟进一个古老的帖子,这是我的Google搜索“使用php用span标签将字符串中的最后一个单词包裹起来”的那个帖子,所以我想这就是我要放的地方我想出了解决方案。

使用以上内容作为起点,我创建了此函数以完成所需的操作:

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