html - 将多行文本与标签对齐，缩进相同

Question

我有一个相当简单的问题，我无法在任何地方找到正确的解决方案。

我有一个标签，旁边的文字会换行到下一行。我希望包装的文本完全缩进。但我希望第一行文字与标签对齐。 inline-block 和 float 都只是让文本出现在下一行。

** 标签和文本行的宽度未知

我想要的:

.item div {
 display: inline-block;
}

.label {
  float: left;
}

.text {
 float: left;
}

<div class="item">
  <div class="label">Label:</div>
  <div class="text">Multi-lined text, should wrap with the first line aligned with the label, and the wrapped text indented all the same. The first line should remain inline with the label untill it wraps. Both the label and the text are unknown lengths. I can't seem to accomplish this with either floats or inline-block.</div>
</div>

Answer 1

您可以使用display: table; 和display: table-cell;

.item {
 display: table;
}

.label {
  display: table-cell;
}

.text {
  display: table-cell;
}

<div class="item">
  <div class="label">Label:</div>
  <div class="text">Multi-lined text, should wrap with the first line aligned with the label, and the wrapped text indented all the same. The first line should remain inline with the label untill it wraps. Both the label and the text are unknown lengths. I can't seem to accomplish this with either floats or inline-block.</div>
</div>