左に浮動するCSSのオーバーフロー

Question

私は2つの行を含むdivがあります。トップラインはタイトルで、ボトムラインは名前です。

タイトルがタイトルが長い場合名前は、しかし、一番下の行（左画像）に

であることを、十分に短い場合、私はオーバーフローが二行に移動し、次の名前を持つようにしたいですそれは右のイメージのように。

誰かが私にこれを手伝ってもらえますか？ここで

HTML構造である：

<div class="container"> 
    <div class="content_top"> 
     <span class="content">Something</span> 
    </div> 
    <div class="name_top"> 
     <span class="name">Steve</span> 
    </div> 
</div> 

Answer 1

CSSのトリック。次の行に同じ名前を付けてください。

私は:first-line疑似要素とword-spacingプロパティを使用しました。

最初の行が短い場合、名前は次の行に配置されます。最初の行が長い場合、名前は同じ行に置かれます。   codepen、  jsfiddle：

結果を確認してください。

/* heart of the matter */ 
 
.container:first-line { 
 
    word-spacing: 240px; /* the width of the container, or more */ 
 
} 
 
.content { 
 
    word-spacing: normal; 
 
} 
 
.insert { 
 
    margin-right: -11px; /* defined by the normal inter-word space */ 
 
} 
 

 
/* nice look */ 
 
.container { 
 
    border: 5px solid black; 
 
    float: left; 
 
    font-family: Helvetica; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    margin: 0 15px 30px 0; 
 
    min-height: 60px; 
 
    padding: 8px 10px; 
 
    width: 240px; 
 
} 
 
.name { 
 
    color: red; 
 
} 
 

 
/* little explanation */ 
 
.colored-background .content { background-color: lightblue; } 
 
.colored-background .insert { background-color: orange; }

<div class="container"> 
 
    <span class="content">Something</span> 
 
    <span class="insert">&nbsp;</span> 
 
    <span class="name">Steve</span> 
 
</div> 
 
<div class="container"> 
 
    <span class="content">Something Something Else</span> 
 
    <span class="insert">&nbsp;</span> 
 
    <span class="name">Steve</span> 
 
</div> 
 

 
<div style="clear: left;"></div> 
 

 
<div class="container colored-background"> 
 
    <span class="content">Something</span> 
 
    <span class="insert">&nbsp;</span> 
 
    <span class="name">Steve</span> 
 
</div> 
 
<div class="container colored-background"> 
 
    <span class="content">Something Something Else</span> 
 
    <span class="insert">&nbsp;</span> 
 
    <span class="name">Steve</span> 
 
</div>

Answer 2

タイトルは、例えば<h1>タグ、使用のCSSスタイルの場合：

h1 { 
    text-align: left; 
}