Question

如果标题为div标记，我如何使用CSS为第一个单词着色？

 <div class="head-logo">  <? echo $siteName ?>  </div>

CSS

.head-logo{
     text-align:center;
     color:#000000; 
     font:normal 22px Tahoma;
     margin: 0px 10px 20px 60px;
}

Answer 1

你可以这样做：

<div class="head-logo">
    <?
    $title = explode(" ", "My title here");
    echo '<span class="firstWord">'.$title[0].'</span>'.substr(implode(" ", $title), strlen($title[0]));
    ?>
</div>

.head-logo{
    text-align:center;
    color:#000000; 
    font:normal 22px Tahoma;
    margin: 0px 10px 20px 60px;
}

.firstWord{color: red;}

Answer 2

你可以使用php explode

<div class="head-logo">
    <?
        $title = explode(" ", $siteName, 2);
        echo '<span style="color: #FF0000">'.$title[0].'</span> '.title[1]);
    ?>
</div>

Answer 3

好的，所以有很多方法可以使用JS和一些棘手的CSS解决方法。

这就是为什么它不起作用：没有“::first-word”伪类，因为在代码语言中，一个“单词”是一个非常半生不熟的定义。所以我一直这样做的方式是使用<span>...</span>标签，但我发现你使用PHP来回显你的网站名称，所以你可以使用::first-line做一些事情。伪元素，然后使伪块成为一个块并以这种方式选择它的长度：

CSS：

display:block;
Width:40-100px; /* just enough for one word, depends on font size */
Overflow:visible; /* so longer words don't get clipped.*/
float:left; /* so it will flow with the paragraph. */
position:relative; /* for typeset adjustments. */

CSS to increase size of first word

这是一个JS解决方案，它实质上取代了在标记中添加了一个span类，并允许您更改那里的字母数。

JS：

$(function() {
    $('h2').each(function(){
        $(this).html( $(this).text().replace(/(^\w{5})/,'<span>$1</span>'));
    });
});

Style half of a word, sentence, etc

小提琴： http://jsfiddle.net/3gMK3/

小提琴，CSS和JS不是我的，只是我在研究时发现的东西

如何使用CSS为第一个单词着色

3 个答案: