Sarma olmadan elek taşması elipsiyle sıvı genişliği üstbilgisini nasıl yapabilirim?

Question

Gerekirse, elips kullanarak aynı hatta bir başlık ve düğmeye ihtiyacım var. Ben çıkışını istiyorum

http://jsfiddle.net/epyFT/1/ şöyle görünecek şekilde: Burada

keman var

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

Ya

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

Veya daha küçük bir pencere ile

:

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

Düğme asla bir sonraki satıra gitmemelidir. Bunu nasıl yapabilirim?

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 doğru çekmeye orada ikinci bir (sabit genişlik) butonuna almak için

Ekstra kredi.

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

Answer 1

Belki de böyle bir şey yardımcı olur? http://jsfiddle.net/epyFT/3/

Düğmenin, kapsayıcının sarılı olmayan genişliğine hizalanmasını nasıl sağlayacağımı bilmiyorum ve yalnızca hücreler için yüzde genişliklerini kullanıyorum.

Yeni kod:

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

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

İşte

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

Answer 2

diğeri

HTML bulunuyor JSFiddle

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

sağ tarafındaki düğmeleri hizalamak .oneline için width: 80%; ekleyin.

Answer 3

Sana daha iyi bir çözüm buldum: 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: I (Webkit tarayıcıları ile uyumludur oldu) Dan büyük bir cevabı aldı

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

ve Firefox ve Internet Explorer 8+ ile uyumlu hale getirildi. İşte keman olduğunu: 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'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; taken out, caused issues in IE */ 
    max-width: -moz-calc(100% - 200px); /* FF hack */ 
} 

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