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

css, html

Solution

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>

Problem

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.

Original source