Question

我有一个div容器，它有一些固定大小的“pre”和“post”内容，主要内容夹在中间 - 主要内容基本上由一个标签和一个数字组成。这是一个带有样本的jsfiddle link（代码也在下面复制 - 我添加的颜色仅用于可见对比度）。

线框模型：

------------------------------------------
| A | Variable Sized Content | 123   | B |
------------------------------------------

A和B是前后内容;文本和数字意味着可变大小，并认为如果没有足够的空间，内容将缩小并用省略号截断：

---------------------------------
| A | Variable Siz... | 123 | B |
---------------------------------

如果有足够的空间，额外的空间介于数字B：

之间

-----------------------------------------------------
| A | Variable Sized Content | 123              | B |
-----------------------------------------------------

我现在正在使用它的方法是在Javascript中的outerDiv上设置一个调整大小的侦听器来设置max-width类的member-text。这也管理内容div的最小大小，以便进一步缩小也会使数字椭圆化。

我遇到的问题是试图让这项工作没有 Javascript - max-width不断变化所有元素是相当cludgy / slow（样本只显示两个项目，但在生产中，这是在许多项目的列表中），并且它使得结构不太可移植，不能用作其他小部件的子组件。我可以重构它来工作，但这需要一些时间，似乎“更正确”的解决方案就是尽可能使用CSS。

我最接近模拟的是将max-width的{{1}}设置为100％，member-text的{{1}}设置为85％左右，这对于outerDiv来说效果很好宽度范围在默认值（230-290ish）附近，但除此之外它会分解（错误部分中的间距太大/很小）。

修改：我现在还尝试使用max-width（以及member-token / display: table，并在根div上使用table-row的div通过在除一列之外的所有列上指定宽度，该列可以动态调整大小。如果只有一个div具有可变大小的内容（文本），这将是有用的，但在这种情况下，有两个（泡沫文本，由模型中的数字表示，但此策略似乎不允许多个动态大小的列。

这引出了我的问题 - 甚至可以用CSS做这种事情吗？如果是这样，怎么做？即使假设数字是固定宽度来简化问题，如果没有Javascript，这似乎也不可能......

这是代码示例（演示问题的简化示例）

HTML：

table-cell

CSS：

table-layout: fixed

Answer 1

我知道非表格数据通常应避免使用表格，但在这种情况下，我认为这可能是您最好的选择。

通过使用表格，我能够通过简单的HTML / CSS获得您想要的行为这里的关键技巧是具有可变大小的内容单元格位置：相对，并且在其内部，绝对定位的跨度固定到所有四个角，以便它伸展。

HTML：

<table>
<tr>
    <td class="pre">
        A
    </td>
    <td class="shrinking">
        <span>
            Very Long Text Purple Monkey Dishwasher
        </span>
    </td>
    <td class="expanding">
        <span>500</span>
        <span class="post"> B</span>
    </td>
</tr>

CSS：

table {
    background: lightgrey;
    width:300px;
}
td {
    border: 1px red solid;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
td.pre {
    width: 25px;
    min-width: 25px;
    text-align: center;
}
td.shrinking {
    max-width: 280px;
    width: 280px;
    position: relative;
}
td.shrinking span {
    white-space:nowrap;
    display: inline-block;
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-overflow: ellipsis;
}
td.expanding {
    min-width: 80px;
}
.post {
    float:right;
    border: 1px red solid;
    width: 25px;
    text-align: center;
}

您可以在此处看到它http://jsfiddle.net/ijoukov/xMf8L/

使用CSS动态控制两个内部div的大小

1 个答案: