用于IE6的CSS文本换行+

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

为简化起见，原始类属性已被替换为样式属性以更清晰地查看属性。

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

这通常会显示如下所示：

Name: Value

当前，如果 “值” 太长，显示这一点。

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

来源

2013-07-26 Stephen

你可以使用负文本缩进（这仅适用于第一行），然后是一个相等大小的余量，所以第一行将保留在山姆中一个地方，但下一个将被推向右边。 –

有办法可以解决这个问题，尤其是'float'属性，但是使用'table'标记（它实际上不会比现在的标记长得多）或者'dl'标记要简单得多。使用提供可接受的默认渲染的HTML标记是一个好主意，然后在需要时使用CSS对其进行微调，而不是使用像'div'和'span'这样的抽象通用标记，并开始想知道如何让事情看起来像样。 –

嗨Jukka，正如我在问题中所述，使用表标签意味着每次调用此函数时，它都会打印出一个小表格标签。虽然可行，但我不确定这是一个“好”的想法。我会看看是否会通过代码审查集合。 – Stephen

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

来源

2013-07-26 16:59:52

你可以使用这样的事情： jsFiddle

HTML：

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

CSS：

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

来源

2013-07-26 17:04:58 ryanSrich

用于IE6的CSS文本换行+

回答

相关问题