First word on one line CSS

Question

I have a grid presenting people. Their names with a picture. The name must be displayed on 2 line. First name on the first line and surname on second one.

I can't change the html (I would use <br/> tag and it would be solved).

I need to find a way (CSS prefered) to achieve this.

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

I have tried to use word-spacing width a high value , that solves part of the problem, but Some surnames have 2 words and I therefore have three lines.

I also have looked for a :first-word selector but it doesn't exist... see here

Does anyone have a solution for this?

I don't think this is possible with css only but I would love to see a solution for it in css if it is possible — Huangism, Feb 10 '14 at 14:24
do you want a new line for each name (separated by a space)? — Danield, Feb 10 '14 at 14:25
Yes that's it in fact it means that a the first space should always be a line-break — web-tiki, Feb 10 '14 at 14:27
yes, but what should happen if there are multiple names (spaces)? - a newline for each - or - only the first? — Danield, Feb 10 '14 at 14:28
Only the first. First names can be two words, but they are seperated by a dash whereas surnames can have two words seperated by a space and that one should not be a line-break — web-tiki, Feb 10 '14 at 14:30
Don't think you can do this just with css - but for what it's worth - you could replicate the `word-spacing` effect by setting `display: table-caption;` on the h2 a - http://jsfiddle.net/danield770/NsRLC/14/ — Danield, Feb 10 '14 at 14:40
I guess so, I wanted to believe it was possible but it seems I'll have to go for JS. — web-tiki, Feb 10 '14 at 14:48

score 1 · Answer 1 · answered Feb 10 '14 at 14:31

1

Your best bet is using

word-spacing:225px;

on the h2 a selector this way each word takes atleast 225px which is 33.3% of the 670px

Other than that you have to either use Javascript or HTML

answered Feb 10 '14 at 14:31

Mordalthunder

256
1
3

As I said in my question; I went for that solution at the biginning but the problem is that two word surnames are displayed in two lines and I can't have that – web-tiki Feb 10 '14 at 14:34
I do, Marie-Laure Le Fren is spaced out on 3 lines – Danield Feb 10 '14 at 14:36
1

see "Marie-Laure Le Fren". "Le Fren" is a surname and it should be on one line. – web-tiki Feb 10 '14 at 14:37
@chadocat Ahh I see what you mean. the only other way is to modify the markup or use JS – stackErr Feb 10 '14 at 14:37

dooxe · Accepted Answer · 2014-02-10T15:05:32.310

1

If you are allowed to modify the HTML dynamically you can do this (using 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);
});

edited Feb 10 '14 at 15:05

answered Feb 10 '14 at 14:32

dooxe

1,481
12
17

This doesn't work, for "Marie-laure Le Fren", "Fren" disapears. See here : http://jsfiddle.net/chadocat/NsRLC/16/ – web-tiki Feb 10 '14 at 14:42
That is true. But, how can you split a name if you don't know what are the parts of the first nale, and what are the parts of the last name ? – dooxe Feb 10 '14 at 14:44
Well the thing is that only the first space should be a line-break : first names can be two words, but they are seperated by a dash whereas surnames can have two words seperated by a space and that one should not be a line-break – web-tiki Feb 10 '14 at 14:46
@chadocat this will work then: http://jsfiddle.net/NsRLC/17/.... assuming the last name will have only 2 words – stackErr Feb 10 '14 at 14:53

score 0 · Answer 3 · edited Feb 10 '14 at 15:01

0

Try This

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

edited Feb 10 '14 at 15:01

ozahorulia

9,798
8
48
72

answered Feb 10 '14 at 14:57

YAMAN

1,008
11
15

First word on one line CSS

3 Answers3