使用CSS和HTML，如果文字不符合行

Question

我有一个要在屏幕上显示的项目列表。这是一个示例列表，其中包含两个我想要的项目：

我的HTML是这样的：

<div class="row">
    <div class="label">Site</div>
    <div class="value">12 Oak Street, Vancouver</div>
</div>
<div class="row">
    <div class="label">Note</div>
    <div class="value">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
</div>

我不知道如何完成的棘手部分是对齐value的文本。如果value可以放在同一行，则它应该是右对齐的。否则，它应该从下一行开始，它应该是左对齐的（如上图所示）。

可以用CSS完成吗？如果需要，我也可以改变HTML的结构。

Answer 1

我担心仅使用CSS是不可行的，
使用JS和一些计算可以帮助在“重叠”另一个元素时更改元素样式。

使用普通CSS的最接近的是这个例子，只有当.value中有少量文本或真正大量的文本（这将使浮动：右元素实际上跨越完整）时才会起作用可用宽度）。否则，您将进入问题：http://jsbin.com/vazaka/2/edit?html,css,output

_{（在阅读上述内容之前不要使用）}

html, body{height:100%; margin:0; font:16px/24px sans-serif;}


.row{
  padding: 8px 16px;
  border-bottom: 1px solid #ccc;
  overflow:auto;
}
.row .label{
  float:left;        /* yaba */
  color:#aaa;
}
.row .value{
  float:right;       /* doooo */
}

<div class="row">
  <div class="label">Site</div>
  <div class="value">12 Oak Street, Vancouver</div>
</div>
<div class="row">
  <div class="label">Note</div>
  <div class="value">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur beatae magni consequuntur. Nostrum veritatis fugit quas rerum, dicta quod consequuntur, deleniti totam consectetur ex eligendi blanditiis quibusdam voluptatibus culpa et.</div>
</div>

Answer 2

我找到了可行的解决方案，但它有些难看，因为它复制了HTML中的文本。但至少，它不需要JavaScript。如果有人提供了更好的解决方案，我很乐意接受它作为正确答案。

html, body{height:100%; margin:0; font:16px/20px sans-serif;}

.row{
  padding: 3px 16px;
  border-bottom: 1px solid #ccc;
  overflow: hidden;
  width: 420px;
  position: relative;
}
.label {
  display: inline-block;
}
.value-right{
  color: #aaa;
  display: inline-block;
  float: right;
}

.value-left{
  color: #aaa;
  display: inline-block;
  position: absolute;
  top: 23px;
  left: 16px;  /* the same as padding in .row */
  right: 16px; /* the same as padding in .row */
  background: white;
}

<div class="row">
<div class="label">Site</div>
<div class="value-right">12 Oak Street, Vancouver</div>
<div class="value-left">12 Oak Street, Vancouver</div>
</div>
<div class="row">
<div class="label">Note</div>
<div class="value-right">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
<div class="value-left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
</div>
<div class="row">
<div class="label">Something long enough that</div>
<div class="value-right">almost fits in one row, but it doesn't</div>
<div class="value-left">almost fits in one row, but it doesn't</div>
</div>