html - ラップせずにテキストオーバーフローの省略記号を使用して可変幅のヘッダーを作成するにはどうすればよいですか?

Question

必要に応じて省略記号を使用して、同じ行にヘッダーとボタンが必要です。

ここにフィドルがあります：http://jsfiddle.net/epyFT/1/

出力を次のようにしたいと思います。

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

または

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

または、より小さなウィンドウで:

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

ボタンが次の行にフロートすることはありません。これどうやってするの？

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

---

ボーナス

そこに 2 番目の (固定幅) ボタンを追加して右に引っ張ることに対する追加の功績。

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

Answer 2

より良い解決策を見つけたと思います：http://jsfiddle.net/epyFT/9/

HTML:

<div class="container">
    <h2>This is a very long heading that should wrap with ellipsis when too long, but have a button to it's right.</h2>
    <button>Hello.</button>
</div>

<div class="container">
    <h2>This is short.</h2>
    <button>Sup</button>
</div>

CSS:

.container {
    display: inline-block;
   max-width:100%;
   position: relative;
}
h2 {  
    padding-right: 200px;
    box-sizing: border-box;
    width: 100%;
    display: inline-block; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    word-break: break-all; 
    word-wrap: break-word; 
}

button {
    position: absolute;
    width: 100px;
    right: 95px;
    top: 2em;
}

Answer 3

Dan の素晴らしい回答 (Webkit ブラウザーとのみ互換性がありました) を採用し、Firefox および Internet Explorer 8+ と互換性を持たせました。これがフィドルです：http://jsfiddle.net/hammerbrostime/9t5bX/1/

.container {
  display: inline-block;
  max-width: 100%;
  position: relative;
}

h2 {
  padding-right: 200px;
  box-sizing: border-box;
  width: 100%;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
  /* word-wrap: break-word;  taken out, caused issues in IE */
  max-width: -moz-calc(100% - 200px);
  /* FF hack */
}

button {
  position: absolute;
  width: 100px;
  right: 95px;
  top: 2em;
}

<div class="container">
  <h2>This is a very long heading that should wrap with ellipsis when too long, but have a button to it's right.</h2>
  <button>Hello.</button>
</div>

<div class="container">
  <h2>This is short.</h2>
  <button>Sup</button>
</div>