Question

首先，对于问题标题感到抱歉，它对我的实际要求可能不是很具描述性（这也是我无法通过Google搜索找到解决方案的原因之一 - 我不知道要搜索什么）

我正在尝试在某些“值文本”旁边布置一些“标签文本”，但是即使需要跨越多行，也希望将值文本保持在行中。

以下是所需结果的示例......

Label 1        Value 1
Label 2        Value 2
Label 3        Value 3 is much longer
               so it needs to span multiple lines
               but should be keep in a nice format
Label 4        Value 4

我知道我可以用表格轻松地做到这一点，但我不认为这里的表格是合适的。尽管示例数据可能看起来像是不相关的。真实标签示例可能是名称，日期，描述和参考编号。

我还想尽量避免使用任何浮动技术 - 主要是因为我认为使用浮点数需要我指定固定宽度以确保标签和值之间的差距相对较小。

除此之外，我愿意使用所提供的任何元素 - 当然，如果它们被证明是最好的行动方式，它们将使用浮动/表格。

如果有人想要快速发挥，

Here is a starting JSFiddle无效。

由于

Answer 1

尝试：

<强> HTML

<div class="wrapper">
    <span class="Header">Label 1</span>
    <span class="Text">Value 1</span>
</div>

<div class="wrapper">
    <span class="Header">Label 2</span>
    <span class="Text">Value 2</span>
</div>

<div class="wrapper">
    <span class="Header">Label 3</span>
    <span class="Text">Value 3 is much longer so it needs to span multiple lines but should be keep in a nice format</span>
</div>

<div class="wrapper">
    <span class="Header">Label 4</span>
    <span class="Text">Value 4</span>
</div>

<强> CSS

.wrapper {
  overflow: hidden;
  width: 200px; /* just for demo */
}

.Header
{
    float: left;
    width:100px;
    color: #00F;
    font-weight: bold;
}
.Text
{
    display: block;
    overflow: hidden;
}

<强>演示

http://jsfiddle.net/SGVE5/6/

Answer 2

如果有的话，您所描述的内容就像表格数据一样。因此，使用简单的表是最合乎逻辑，最强大，最灵活的方式：

<table>
<tr valign=top><td>label1 <td>value1
...
</table>

这样，您无需对标签的宽度进行任意猜测，并且字体大小或文本长度的更改不会对页面布局造成严重破坏。表格格式会根据需要自动分配。如果您需要或希望，您可以为整个表格设置最大宽度，甚至固定宽度。

两个HTML元素并排显示，但带有换行自动换行

2 个答案: