CSS溢出向左浮动

我有一个包含两行的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>

解决方法

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>

CSS溢出向左浮动

解决方法

猜你在找的CSS相关文章