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