1

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

线框模型：

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

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

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

如果空间很大，多余的空格会出现在数字和 之间B：

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

我现在让它工作的方式是outerDiv在 Javascript 中设置一个调整大小max-width的侦听器来设置member-text类的。这还管理内容 div 的最小大小，以便进一步缩小也将省略数字。

我遇到的问题是试图在没有Javascript 的情况下使这项工作 -max-width不断更改所有元素相当笨拙/缓慢（示例仅显示两个项目，但在生产中这是在许多项目的列表中），并且它使结构不便于用作其他小部件的子组件。我可以重构它以使其工作，但这需要一些时间，而且似乎“更正确”的解决方案是尽可能使用 CSS。

我最接近模拟的方法是设置max-width为member-text100% 和85% 左右，这max-width对于member-token默认值 (230-290ish) 附近的 outerDiv 宽度范围看起来不错，但除此之外它会崩溃（间距太大/太小在错误的部分）。

编辑：我现在也尝试使用display: table( 和table-row/ table-cell，table-layout: fixed在根 div 上使用 div - 通过在除一列之外的所有列上指定宽度，该列可以动态调整大小。如果只有一个具有变量的 div，这将很有用大小的内容（文本），但在这种情况下，有两个（气泡文本，由模型中的数字表示），但这种策略似乎不允许多个动态大小的列。

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

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

HTML： 

<div class="outerDiv">
  <div class="post-mark"></div>
  <div class="pre-mark"></div>
  <div class="member">
        <div class="member-token">
            <label class="member-text">Very Long Text Purple Monkey Dishwasher</label>
        </div>
        <div class="member-bubble">
            <span class="member-bubble-text">500</span>
        </div>
  </div>
</div>

<div class="outerDiv">
  <div class="post-mark"></div>
  <div class="pre-mark"></div>
  <div class="member">
        <div class="member-token">
            <label class="member-text">Purple Monkey Dishwasher</label>
        </div>
        <div class="member-bubble">
            <span class="member-bubble-text">500</span>
        </div>
  </div>
</div>

CSS： 

.outerDiv {
      width: 280px;
      height: 100px;
      background-color: lightgrey;
  }

  .post-mark {
      display: inline-block;
      height: 100%;
      margin-right: 8px;
      position: relative;
      width: 18px;
      float: right;
      background-color: cyan;
  }

  .pre-mark {
      height: 100%;
      margin-left: 4px;
      position: relative;
      width: 18px;
      float: left;
      background-color: pink;
  }

  .member {
      margin-left: 22px;
      height: 22px;
      overflow: hidden;
      position: relative;
      white-space: nowrap;
      background-color: cadetblue;
  }

  .member-token {
      float: left;
      height: 20px;
      margin-left: 2px;
      padding: 0 3px;
      background-color: darksalmon
  }

  .member-text {
      display: inline-block;
      line-height: 20px;
      max-width: 193px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      background-color: goldenrod;
  }

  .member-bubble {
      display: block;
      height: 100%;
      overflow: hidden;
      padding: 0 4px;
      position: relative;
      background-color: burlywood
  }

  .member-bubble-text {
      top: 4px;
      -moz-box-sizing: border-box;
      background-color: #F2F2F2;
      border-radius: 3px 3px 3px 3px;
      display: inline-block;
      line-height: 14px;
      max-width: 100%;
      padding 0 4px;
      position: relative;
      vertical-align: top;
      color: #666666;
      font-size: 11px;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
4

1 回答 1

0

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

通过使用表格，我能够通过简单的 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/

于 2013-02-14T03:43:53.770 回答