html - 如何在不换行的情况下制作带有文本溢出省略号的流体宽度标题？

Question

我需要将标题和按钮放在同一行，必要时使用省略号。

这是一个 fiddle :http://jsfiddle.net/epyFT/1/

我希望输出看起来像这样:

_________________________________________________________
|                                                       |
| Header goes here [button]                             |
|                                                       |
---------------------------------------------------------

或者

_________________________________________________________
|                                                       |
| Super, super, super, super long header... [button]    |
|                                                       |
---------------------------------------------------------

或者使用更小的窗口:

____________________________
|                          |
| Header goes... [button]  |
|                          |
----------------------------

按钮不应该 float 到下一行。我该怎么做？

HTML

<div class="container">
    <h2>This is the header that should never wrap and elipse if it doesn't fit</h2>
    <button>Button</button>
</div>

<div class="container">
    <h2>Header</h2>
    <button>Button</button>
</div>

CSS

.container {
    width:100%;
}
h2 {
    display:inline;
    min-width:200px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; word-wrap: break-word;
}
button {
    width:100px;
}

---

奖金

获得第二个(固定宽度)按钮以向右拉动的额外功劳。

_________________________________________________________
|                                                       |
| Header goes here [button1]                  [button2] |
|                                                       |
|                                                       |
| Super, super, super, super long... [button] [button2] |
|                                                       |
---------------------------------------------------------

Answer 1

也许这样的事情有帮助？ http://jsfiddle.net/epyFT/3/

我不确定如何使按钮与容器的无包装宽度对齐，并且我只对单元格使用百分比宽度。

新代码:

.container {
  width: 100%;
  display: table;
  table-layout: fixed;
}

.container>div {
  display: table-cell;
}

.cell1 {}

.wrap {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
  word-wrap: break-word;
}

.cell2 {
  width: 60%;
}

h2 {
  display: inline;
  min-width: 200px;
}

button {
  width: 100px;
}

<div class="container">
  <div class="cell1">
    <div class="wrap">
      <h2>This is the header that should never wrap and elipse if it doesn't fit</h2>
    </div>
  </div>
  <div class="cell2">
    <button>Button</button>
  </div>
</div>
<div class="container">
  <h2>Header</h2>
  <button>Button</button>
</div>