Html 用于IE6+的CSS文本包装；

我有以下由MVC框架中的视图生成的HTML结构。此HTML结构在页面上重复使用，以显示用户填写的表单的名称-值对。它基本上是一个HTML小部件，由视图调用以显示每个名称-值对

为了简化，原始类属性已替换为样式属性，以便更清楚地查看属性

<div>
  <p>
   <span style="display: inline-block; width: 40%;">Name:</span>
   <span>Value</span>
  </p>
</div>

当前，如果“值”太长，显示器将执行此操作

Name: This value is extremely
too long for me.

我想更改此显示行为，使其看起来像这样

Name: This value is extremely
      too long for me. Any 
      longer string simply
      adds to the bottom.

我能想到的实现这一点并且仍然在IE6中工作的唯一方法是使用表标记，但是对于显示的每个名称-值对，最终都会有很多表标记。我无法将页面上的数据放入单个表标记中。是否有一种更轻量级的CSS解决方案/对HTML的细微更改仍然适用于IE6？

<div class="name_value">
<div class="name">Name</div>
<div class="value">Extremely big text</div>
<div class="clearfix"></div>
</div>

<style type="text/css">
.name_value { position: relative;  }
.name { float: left; display: inline; width: 50%}
.value { float: right; display: inline; width: 50%; }
.clearfix { clear: both; }
</style>

名称
超大文本
.name_值{位置：相对；}
.name{float:left；display:inline；width:50%}
.value{float:right；display:inline；width:50%；}
.clearfix{clear:两者；}

您可以使用以下内容：

HTML:

<div class="outer">
    <div class="left">Name:</div>
    <div class="right">This value is extremely too long for me.</div>
</div>

---

您可以使用负文本缩进（这仅适用于第一行），然后使用大小相同的左边距，这样第一行将保持在相同的位置，但下一行将被向右推。有一些方法可以处理此问题，特别是使用

float

属性，但使用

table

标记会简单得多（不会比当前的标记长太多），或

dl

标记。最好使用提供可接受的默认呈现的HTML标记，然后在需要时开始使用CSS对其进行微调，而不是使用抽象的通用标记，如

div

和

span

，然后开始思考如何使事情看起来像样。Hi Jukka，正如我在问题中所述，使用表标记m每次调用这个函数时，它都会打印出一个很小的表标记。虽然这是可行的，但我不确定这是否是一个“好”主意。我会看看这是否能通过代码审查。

<div class="outer">
    <div class="left">Name:</div>
    <div class="right">This value is extremely too long for me.</div>
</div>

.outer{
   width: 100%;
   max-width: 200px;
}
.left{
   float: left;
}
.right{
   float: right;
   max-width: 130px;
}