How can I make a fluid width header with text-overflow ellipsis without wrapping?


Tags: html,css,html5,css3

Problem :

I need a header and button on the same line, using ellipses if necessary.

Here's a fiddle: http://jsfiddle.net/epyFT/1/

I'd like output to look like this:

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

Or

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

Or with a smaller window:

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

The button should never float to the next line. How can I do this?

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

Extra credit for getting a second (fixed width) button in there to pull right.

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


Solution :

Maybe something like this helps? http://jsfiddle.net/epyFT/3/

I'm not sure how to make the button align to the no-wrapped width of the container, and am only using percentage widths for the cells.

New code:

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

    CSS Howto..

    How to access a directory one level up in CSS?

    jQuery - How to animate text simultaneously to color change transition

    how to keep table 100% wide?

    Pagination: How to display a long text as book pages?

    How to make vim alphabetically sort CSS rules within a single line?

    How to group CSS/Javascript button behaviour? [closed]

    How can I register a css page from an ascx control?

    How do I alter my Jquery slideshow to change size in different screen resolutions

    GWT- SingleSelectionModel celltable- how to change selected cell's CSS?

    How to apply CSS style when ID is taken?

    how to customize css ellipse for a text string [duplicate]

    CSS/Javascript: How to make rotating circular menu with multiple states?

    How to move img src a few pixels down in html page

    How to fix incorrect element size on browser scaling?

    How to target a group of long similar CSS selectors on one line?

    How i can make that mobile menu fill the 50% of the width of the screen in Wordpress?

    How can I append the images from this JSON file properly into the correct divs

    How to create a table WITHOUT alternating row colors when using Blueprint CSS framework?

    How to apply padding to an HTML input element?

    How to remove underline in css for anchors pseudo element in IE

    How to change css background color dynamically in php using color from database

    How to align radio buttons with labels in one line? [duplicate]

    How to Center Text in a JavaScript Function?

    how to resize background image of body in aspx page

    How to remove the empty space between divs in CSS?

    How to change the width of dynamically generated list boxes, based on user input?

    Using css modules, how can I use composes to include a list of variables for colors

    how to make html table first row 'absolute'

    How To Change Text Box Content On Hover

    How do I get Jquery to toggle display