如何使<span>文本在第一行的开头很好地换行</span>

Question

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 1

Probably one of the best/quickest ways with the best browser support is to use display:table :

 .status-container { margin-top: 100px; display: table; } .status-text { font-weight: bold; padding-left: 10px; display: table-cell; } .status-label { display: table-cell; } 

 <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> 

Otherwise, if you don't need IE9 support, use a flexbox layout :

 .status-container { margin-top: 100px; display: flex; } .status-text { font-weight: bold; padding-left: 10px; } 

 <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> 

Answer 2

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> 

Answer 3

You can always display them table-like

.status-label{
 display:table-cell;
}
.status-text{
 display: table-cell;
 padding-left:10px;
}

Answer 4

Use inline block in your css classes to make them line up horizontally.

.status-label, .status-text {
    display: inline-block;
}