Переполнение CSS для поплавка слева

Question

У меня есть 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; 
}