固定宽度的行，动态大小的列，带中断自动换行答案

【问题标题】：Fixed width row, dynamicaly sized columns, with break word wrapping固定宽度的行，动态大小的列，带中断自动换行
【发布时间】：2013-09-30 21:29:28
【问题描述】：

我有一系列带有标签和值的行，如下所示：

<div class="row">
    <div class="rowName">thing 1</div>
    <div class="rowValue">325,000</div>
</div>
<div class="row">
    <div class="rowName">thing 2 that is longer</div>
    <div class="rowValue">4,000</div>
</div>
<div class="row">
    <div class="rowName">THING_3_NO_SPACE</div>
    <div class="rowValue">150</div>
</div>

这是一个 jsfiddle，看看我到目前为止有什么：http://jsfiddle.net/YYUg6/

我的问题是，如果标签是一个冗长的单词，比如上面的 THING_4，那么它会将值推出到外部容器的宽度之外。

将标签包装到下一行，甚至隐藏溢出都可以，但我无法以合理的方式实现。我可以将其设置为使用 table-layout:fixed，然后左列不会向右推，但前提是我在右列上设置了显式宽度，这是不切实际的，因为它们可能包含从小到大的数字。

我没有与 jsfiddle 中的 div 上使用的 display:table 和 display:table-cell 结婚，所以如果没有它就可以实现所需的外观，那么我完全赞成。我只在右列较大时使用 display:table 使左列变小（因此比长内容与值重叠时要好），但如果没有分词，则不起作用。

有什么想法吗？感谢您的帮助！

【问题讨论】：

小提琴有什么问题？
嗯，我不应该在 .rowName 中有那个最大宽度，因为值宽度变化如此之大。这是一个没有显示问题的内容。 jsfiddle.net/YYUg6/5
有趣的是，max-width 在 Firefox 和 chrome 中可以满足我的要求，但我认为这不是规范，所以我担心它会在以后的版本中中断；据说 max-width 仅适用于块元素，而这些是表格单元。即使它设置为最大 100 像素，最后一个框实际上是 119 像素，似乎完全符合我的要求：使最右边的单元格尽可能大以显示内容，而左边的单元格得到其余部分。如果我能找到正确的方法来做到这一点，而不是依赖一些不太正常的东西。

标签： html css

【解决方案1】：

好吧，我确实得到了我想要的结果，除了我不得不切换 HTML 中“列”的顺序以便浮动按我期望的那样工作的可悲事实。不得不更改 HTML 结构以适应样式让我感到难过，但我想这就是现在现实世界的工作方式。

所以我改变了值和标签的顺序，将值浮动到右边，删除了所有的 display:table junk，它工作正常。这是一个更新的小提琴，可以看到它的实际效果：http://jsfiddle.net/YYUg6/10/

<div class="wrapper">
    <div class="right">325,000</div>
    <div class="left">thing 1</div>
</div>
<div class="wrapper">
    <div class="right">4,000</div>
    <div class="left">thing 2 that is longer</div>
</div>
<div class="wrapper">
    <div class="right">150</div>
    <div class="left">THING_3_NO_SPACE_IN_HERE</div>
</div>

.wrapper {
    width: 150px;    
}
.wrapper, .right, .left {
}
.right {
    float: right;
    text-align: right;
    padding-left: 10px;
}
.left {
    word-wrap: break-word;
    overflow: hidden;
}

【讨论】：

【解决方案2】：

没有看最后一部分，抱歉。

给你 http://jsfiddle.net/YYUg6/1/

display:tabel-cell;
vertical-align:middle;

这里，忘记上面的那些东西，这个怎么样？http://jsfiddle.net/YYUg6/2/

另一个更新的想法http://jsfiddle.net/YYUg6/4/

【讨论】：

嗨，网络猫头鹰。感谢您的输入。这些问题是标签和值位于不同的行上。相反，标签和它的值应该在同一行。