Как я могу сделать заголовок ширины жидкости с эллипсисом переполнения текста без упаковки?

Мне нужен заголовок и кнопка в той же строке, если нужно использовать эллипсы.

Здесь сценарий: 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;
}

Bonus

Дополнительный кредит для получения второй (фиксированной ширины) кнопки, чтобы тянуть вправо.

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

Ответ 1

Может быть, что-то подобное помогает? http://jsfiddle.net/epyFT/3/

Я не уверен, как сделать кнопку совпадающей с шириной контейнера без обертки, и я использую только процентную ширину для ячеек.

Новый код:

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

CSS:

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

Ответ 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 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;
}

Ответ 3

Здесь еще один

HTML:

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

CSS

.container {
    width: 100%;
}
.oneline {
    display: inline-block;
    vertical-align: middle;
    max-width: 80%;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

JSFiddle

Чтобы выровнять кнопки с правой стороны, добавьте width: 80%; в .oneline.

Ответ 4

Я получил отличный ответ от Dan (который был совместим только с браузерами Webkit) и совместил его с Firefox и Internet Explorer 8+. Вот скрипка: http://jsfiddle.net/hammerbrostime/9t5bX/1/

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 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;  taken out, caused issues in IE */
    max-width: -moz-calc(100% - 200px); /* FF hack */
}

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