css以不同的格式设置h1的第1行和第2行？&更改换行位置

Question

嗨，我在wordpress中使用一个具有特色的post小部件，它正在显示我的h1标题超过2行。不过，我想更改空白处或行距，这样，第一行的“工作场所伤害”和第二行的“预防”将改为第一行的“工作场所”和第二行的“伤害预防”。

任何想法。我试过使用psuedo第一行命令，但是没有运气。

#home-header-right .featuredpage .post-7  h2:first-line,
#home-header-right .featuredpage .post-20  h2:first-line, 
#home-header-right .featuredpage .post-7  a:first-line,
#home-header-right .featuredpage .post-20  a:first-line  {
    padding: 0 50px 0 0;
}

Answer 1

:first-line选择的文本是文本的内联级块，不能对其应用填充和页边距。您可以尝试在其上设置display: block以查看它是否有效，但就W3C维基而言，您只能对该文本使用以下CSS属性：

• font属性，color，background属性，word-spacing，letter-spacing，text-decoration，vertical-align，text-transform和line-height

Answer 2

如果您想拆分第一个单词的文本，我建议您将其包装在另一个元素中：

<h1><span>Workplace</span> Injury Prevention</h1>

h1 span {
    display: block;
}

示例：http://dabblet.com/gist/1714493

附加的元素是非语义的，但不如硬编码的<br>，而且比试图处理:first-line伪元素更可靠。

编辑：如果您不能在文章标题中使用jQuery，并且不介意使用一些jQuery，您可以动态地包装文本，如下所示：

(function($) {
    $('h1:contains(Workplace Injury Prevention)')
        .html(function(i, html) {
            return html.replace('Workplace', '<span>Workplace</span>');
        });
    ;
})(jQuery);

示例：http://jsfiddle.net/deZKd/

要对其他帖子标题执行此操作，您可能需要一些更通用的内容：

(function($) {
    $('h1')
        .html(function(i, html) {
            return html.replace(/^(\w+)\b/, '<span>$1</span>');
        });
    ;
})(jQuery);

示例：http://jsfiddle.net/deZKd/1/

(请记住，在这两个示例中，您都希望更改选择器，使其只匹配小部件中的post标题，例如#recent-posts-widget h1:contains(…)。)