Tom O'Brien Tom O'Brien - 1 month ago 5
CSS Question

How to make <span> text wrap nicely below start of first line

I am trying to make a simple

label: value


pairing look nice. The problem I have is that when the value is so long that it wraps around and goes on to a second line, the second line starts below the label text. I would like it to start on the same horizontal position as the first line of text.

The HTML looks like this:

<div class="status-container">

<span class="status-label">Status:</span>

<span class="status-text">This is some rather long text that I would like to the second line of text to start at the same horizontal position as the first line. At the moment it wraps beneath the 'status:' label which is annoying</span>

</div>


The CSS looks like this:

.status-container {
margin-top: 100px;
}

.status-text {
font-weight: bold;
margin-left: 10px;
}


I have create a PLNKR to show how it looks: https://plnkr.co/edit/qbFj4bwEpPf7aUldvjBU

I am sure I am forgetting something extremely simple and obvious, but it is a while since I did this CSS stuff..... All help much appreciated.

Answer

And don't forget the overflow:hidden trick:

.status-label {
  float:left; padding-right:10px;
}
.status-text {
  overflow:hidden; display:block;
}
<div class="status-container">
  <span class="status-label">Status:</span>
  <span class="status-text">This is some rather long text that I would like to the second line of text to start at the same horizontal position as the first line. At the moment it wraps beneath the 'status:' label which is annoying</span>
</div>

Comments