CSS overflow to float left

Question

I have a div that contains two lines. Top line is title and bottom line is name.

when the title is short enough, that the name is on the bottom line (left image)

However, when the title is long, I want the overflow to go to the second line and have the name next to it like in right image.

Could someone help me with this?

Here is the html structure:

<div class="container">
   <div class="content_top">
      <span class="content">Something</span>
   </div>
   <div class="name_top">
      <span class="name">Steve</span>
   </div>
</div>

Two divs (or tds) with line break set to wrap, or whatever gives you width control. — user5306470
– user5306470, Commented Jun 6, 2016 at 5:41

Gleb Kemarsky · Accepted Answer · 2016-06-06 08:58:43Z

CSS trick. Place the name on the next line or on the same one

I've used the :first-line pseudo-element and the word-spacing property.

If the first line is short, then the name is placed on the next line. If the first line is long, then the name is placed on the same line.

Please check the result: 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>

Mr Lister · Accepted Answer · 2016-05-29 16:42:01Z

0

If the title is an <h1> tag for example, use CSS style:

h1 {
    text-align: left;
}

edited May 29, 2016 at 16:42

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered May 27, 2016 at 22:09

devwraps

374 bronze badges

2 Comments

HEYHEY Over a year ago

Thank you for the reply. I added a code that I have now. I can change the structure if necessary

user5306470 Over a year ago

Isn't heading a block element? Mention to inline it!

Collectives™ on Stack Overflow

CSS overflow to float left

2 Answers 2

CSS trick. Place the name on the next line or on the same one

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

CSS trick. Place the name on the next line or on the same one

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related