一行上的第一個字CSS

我有一個網格呈現人。他們的名字與一張照片。該名稱必須顯示在2行上。第一行的名字和第二行的姓氏。一行上的第一個字CSS

我不能更改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字，因此我有三行。

我還找了一個:first-word選擇，但它不存在...看到here

有沒有人有一個解決方案？

來源

2014-02-10 web-tiki

我不認爲這不僅是可能的，但CSS我很想看到一個解決方案，這在CSS如果可能的話 – Huangism

你想爲每名新線（分離由一個空間）？ – Danield

是的，這是事實上，它意味着第一個空間應該總是一個換行 –

如果你被允許修改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); 
});

來源

2014-02-10 14:32:38 dooxe

這是行不通的，因爲「Marie-laure Le Fren」，「Fren」disapears。看到這裏：http://jsfiddle.net/chadocat/NsRLC/16/ –

這是真的。但是，如果你不知道第一個nale的哪些部分是什麼，並且姓氏的哪些部分是什麼？ – dooxe

問題是，只有第一個空格應該是一個換行符：名字可以是兩個單詞，但它們由短劃線分隔，而姓氏可以有兩個單詞由空格分隔，並且不應該是行 - 打破 –

最好的辦法是使用

word-spacing:225px;

在h2 a選擇這種方式，每個字需要ATLEAST 225px這是670px

其他的33.3％，比你必須要麼使用JavaScript或HTML

來源

2014-02-10 14:31:33 Mordalthunder

正如我在我的問題中所說的那樣;我在biginning的解決方案，但問題是，兩個字姓顯示在兩行，我不能有這個 –

@chadocat我沒有看到發生在這裏：http://jsfiddle.net/NsRLC/13/ – stackErr

我這樣做，瑪麗 - 勞雷樂弗倫是分隔出3行 – Danield

嘗試這個

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

來源

2014-02-10 14:57:13 YAMAN

這變得非常奇怪：http：//jsfiddle.net/chadocat/NsRLC/20/ –

一行上的第一個字CSS

回答

相關問題