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>
格莱布·凯玛斯基(Gleb Kemarsky)

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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章