Question

How to crop text when the width of element is dynamic?

It’s possible to crop text when width of element is fixed:

.my-class {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

But how to do it when width is dynamic?

Real example – header of application with the title floating at the left and the toolbar floating at the right:

The title should take all free place but not more:

How to crop text in such dynamic title?

Code to play live http://cssdeck.com/labs/fbe2t2qo/0

Answer 1

As it turned out it’s actually possible to do, changes are:

• set the toolbar first in the html and make it floated to the right.
• set text overflow on title.

HTML

<div class='header'>
    <div class='header-toolbar'>
        <button>Create</button>
    </div>
    <div class='header-title'>
        Very very very very very long very very very long title
    </div>

    <div class='clearfix'></div>
</div>

CSS

.header, .header-title, .header-toolbar {
    border: 1px solid black;
    margin: 3px;
    padding: 3px;
}

.header-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-toolbar {
    float: right;
}

.clearfix {
    clear: both;
}

Code http://cssdeck.com/labs/na24g9nf/0

P.S.

It’s not my answer, it was answered by this guy http://www.sql.ru/forum/memberinfo.aspx?mid=114453 in this thread http://www.sql.ru/forum/actualthread.aspx?tid=979934