Question

我有一个网格呈现人。他们的名字带有图片。名称必须显示在2行。第一行的名字和第二行的姓氏。

我无法更改html （我会使用<br/>标记，它会被解决）。

我需要找到一种方法（CSS首选）来实现这一目标。

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宽度为高值，这解决了部分问题，但有些姓氏有2个字，因此我有3行。

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

有人有解决方案吗？

Answer 1

你最好的选择是使用

word-spacing:225px;

在h2 a选择器上这样每个单词至少需要225px，这是670px的33.3％

除此之外，您必须使用Javascript或HTML

Answer 2

如果允许您动态修改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);
});

Answer 3

试试这个

var name = $("#wrap article header h2 a").text().split(" ");
$("#wrap article header h2 a").html(name[0] + "<br/>" + name[1]);

关于一行CSS的第一个字

3 个答案: