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 can I “display:none” to some adjacent text with CSS?

    I am wondering how js fiddle is handling their textareas concerning resizing and their layot

    How to change from one stylesheet to another with jQuery?

    Showing images next to paragraph

    How to detect mouse is over a child element in jQuery?

    BeautifulSoup4/CSS selector how to select the

    How can I build a flexible ratings widget in LESS instead of straight CSS?

    Keeping content “fixed” under slideshow of different image sizes

    How to remove floats so items don't wrap with CSS only in this Codepen

    how to adjust the background color to the right height

    How to make text responsive to div size?

    How can I make this image responsive?

    how to encrypt css/js filename

    How can I get IE8 to accept a css :before tag?

    how to make this (table) using divs and css

    How to target div within a modal box with CSS

    How can I create CSS styles dynamically?

    2 Sidebar Columns Layout (How)?

    How to create a “shiny” effect like this using CSS gradients?

    How-to set background-position-x?

    CSS, borders: How do I prevent a border added to a table cell from displacing neighboring cells?
    I think you'll either need to size all non border cells wider and higher by the width of the line around it. or you given them all borders and set...
    Read more

    How to stop grunt compass task compiling sass files intended for include

    css transition effects on show/hide element using css3 [duplicate]

    How to reverse font percentages

    How do I replace color: windowtext;

    Css accordion menu, how to set height to automatic?

    How to position 3 images on top of one another and retain responsiveness using just CSS?

    How to design HTML header

    How to rotate an image back and forth with JavaScript

    how can the value of an href attribute be changed using javascript/css?