javascript - 一行 CSS 中的第一个词

Question

我有一个展示人物的网格。他们的名字和照片。名称必须显示在 2 行上。第一行是名字，第二行是姓氏。

我无法更改 html(我会使用 <br/> 标签，它会被解决)。

我需要找到一种方法(首选 CSS)来实现这一点。

FIDDLE

HTML:

<div id="wrap">
    <article>
        <header>
             <h2>
            <a href="#">Veronique Bertis</a>
        </h2>

        </header>
        <div>
            <img src="http://placekitten.com/200/130" />
        </div>
    </article>
    <article>
        <header>
             <h2>
            <a href="#">Delphine Donlec</a>
        </h2>

        </header>
        <div>
            <img src="http://placekitten.com/200/130" />
        </div>
    </article>
    <article>
        <header>
             <h2>
            <a href="#">Marie-France Aroul</a>
        </h2>

        </header>
        <div>
            <img src="http://placekitten.com/200/130" />
        </div>
    </article>
    <article>
        <header>
             <h2>
            <a href="#">Gwen Domis-Achrall</a>
        </h2>

        </header>
        <div>
            <img src="http://placekitten.com/200/130" />
        </div>
    </article>
    <article>
        <header>
             <h2>
            <a href="#">Marie-Laure Le Fren</a>
        </h2>

        </header>
        <div>
            <img src="http://placekitten.com/200/130" />
        </div>
    </article>
    <article>
        <header>
             <h2>
            <a href="#">Michel Rian</a>
        </h2>

        </header>
        <div>
            <img src="http://placekitten.com/200/130" />
        </div>
    </article>
</div>

CSS

#wrap{
    width:670px;
}

article {
    width:33.3%;
    float:left;
}
h2 a {
    text-decoration:none;
    font-size: 30px;
    font-family:arial,serif;
    color:#000;
}

我试过使用 word-spacing width a high value ，这解决了部分问题，但有些姓氏有 2 个单词，因此我有 3 行。

我也找了 :first-word选择器，但它不存在...参见 here

有人对此有解决方案吗？

Answer 1

如果您被允许动态修改 HTML，您可以这样做(使用 jQuery):

    var $splitter = $("#wrap article header h2 a");
$splitter.each(function(i, e){             
 var $e = $(e);
    var name = $e.text().split(" ");
    var firstname = name.splice(0, 1);
    var last = "";
    for(var i = 0; i < name.length; ++i)
        last += name[i] + " ";
    $e.html(firstname + "<br/>" + last);
});