Question

我想做一个简单的

label: value

配对看起来不错。我遇到的问题是，当值太长以至于包裹并继续到第二行时，第二行从标签文本下方开始。我希望它开始于与第一行文本相同的水平位置。

HTML看起来像这样：

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

CSS看起来像这样：

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

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

我创建了一个PLNKR来展示它的外观：https://plnkr.co/edit/qbFj4bwEpPf7aUldvjBU

我确信我忘记了一些非常简单明了的东西，但是因为我做了这些CSS的东西已经有一段时间......所有人都非常感激。

Answer 1

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

否则，如果您不需要IE9支持，请使用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

您始终可以将它们显示为表格式

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

Answer 3

在css类中使用内联块使它们水平排列。

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

Answer 4

并且不要忘记overflow:hidden诀窍：

＆＃13;

.status-label {
  float:left; padding-right:10px;
}
.status-text {
  overflow:hidden; display:block;
}

＆＃13;

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

＆＃13;

如何使<span>文本在第一行的开头处很好地包装

4 个答案: