CSS溢出向左浮动

我使用了:first-line伪元素和word-spacing属性.@H_197_3@

如果第一行很短,则名称将放在下一行.如果第一行很长,则名称放在同一行.@H_197_3@

请检查结果：codepen,@L_450_4@.@H_197_3@

/* 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>