Comment est-ce que je peux faire un en-tête de largeur de fluide avec des ellipses de débordement de texte sans emballage?

J'ai besoin d'un en-tête et le bouton sur la même ligne, à l'aide de points de suspension si nécessaire.

Ici un violon: http://jsfiddle.net/epyFT/1/

J'aimerais sortie ressemble à ceci:

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

Ou

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

Ou avec une petite fenêtre:

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

Le bouton ne doit jamais flotter à la ligne suivante. Comment puis-je faire cela?

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

Un crédit supplémentaire pour l'obtention d'un deuxième (largeur fixe) bouton de là à tirer à droite.

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

source d'informationauteur Ryan

  1. 7

    Je pense que je vous ai trouvé une meilleure solution: 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;
}
  2. 1

    Voici un autre

    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

    Pour aligner les boutons sur le côté droit, ajouter width: 80%; à .oneline.

  3. 0

    J'ai pris Dan la grande réponse (qui est uniquement compatible avec les navigateurs Webkit), et il est compatible avec Firefox et Internet Explorer 8+.
    Voici le violon: 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;
}